Bootstrap Table Filter by Multiple Columns
<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>