title: Bootstrap Table Filter by Multiple Columns
body: <p>I am using Bootstrap Table by wenzhixin. I need to filter by several columns. For example, I need to filter Countries and then Cities. </p>
  
  <p>I have two select fields for each field in the table (Select Country and Select City).</p>
  
  <p>The way I am doing it right now is I apply <em>filterBy</em> method on change of select option:</p>
  
  <pre><code>    $('#countries-list').on('change', function (evt) {
          var selectedCountry = $('#countries-list').select2('val');
          if (selectedCountry == "all") {
              $tableFilter.bootstrapTable('filterBy');
          } else {
              $tableFilter.bootstrapTable('filterBy', {country: selectedCountry});                
          }
      });
  
      $('#cities-list').on('change', function (evt) {
          var selectedCity = $('#cities-list').select2('val');
          if (selectedCity == "all") {
              $tableFilter.bootstrapTable('filterBy');
          } else {
              $tableFilter.bootstrapTable('filterBy', {city: selectedCity});              
          }
      });
  </code></pre>
  
  <p>The problem is that they overwrite each other. I would appreciate any suggestions on how to apply second filter only to the results of the first one, not to the entire dataset.</p>
  
  <p>Thank you!</p>