Bootstrap Table Filter by Multiple Columns

Question

I am using Bootstrap Table by wenzhixin. I need to filter by several columns. For example, I need to filter Countries and then Cities.

I have two select fields for each field in the table (Select Country and Select City).

The way I am doing it right now is I apply filterBy method on change of select option:

    $('#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});              
        }
    });

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.

Thank you!

Answer 1

I suggest that you use the bootstrap-table extension Filter-Control.

• Example
• Github project