Filter Table Dependent On Multiple Select Tags

I am using Jquery datatable and I want to use multiple select tags to filter datatable but currently I am able to filter using 1 select tag. One select tag is for one column and th

Solution 1:

var table = $('#example').DataTable({
  "bLengthChange": false,
  //searching: false,pageLength: 2,
  dom: 'tip'
});
  
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
    
    var filterCategory= $("#cato option:selected").text().toUpperCase();
    var filterSubCategory= $("#subo option:selected").text().toUpperCase();
    var subCategory = String(data[1]).toUpperCase();
    var category = String(data[2]).toUpperCase();
    
    //console.log(filterSubCategory);if(filterSubCategory != "-SELECT SUBCATEGORY-") {
        if ( filterCategory == category && filterSubCategory == subCategory)
             returntrue;
        }
        elseif(filterCategory != "-SELECT CATEGORY-") {
            if ( filterCategory == category)
             returntrue;
        }
  
        returnfalse;
    }
);

$('#cato').on('change', function() {
  $('#subo').val("");
  table.draw();
});

$('#subo').on('change', function() {
  table.draw();
});

<linkhref="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><scriptsrc="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script><selectid="cato"class="form-control" ><optionvalue=""disabledselected="true">-Select Category-</option><option>Electronics</option><option>Sports</option></select><selectid="subo"class="form-control"><optionvalue=""disabledselected="true">-Select Subcategory-</option><option>Laptop</option><option>Mobile</option></select><tableid="example"class="table display"><thead><tr><th>Product</th><th>Subcategory</th><th>Category</th></tr></thead><tbodyid="r"><tr><td>Samsung</td><td>Mobile</td><td>Electronics</td></tr><tr><td>Racket</td><td>Tennis</td><td>Sports</td></tr><tr><td>Bat</td><td>Cricket</td><td>Sports</td></tr><tr><td>Dell</td><td>Laptop</td><td>Electronics</td></tr><tr><td>Iphone</td><td>Mobile</td><td>Electronics</td></tr><tr><td>Soccer Ball</td><td>Soccer</td><td>Sports</td></tr></tbody></table>

Solution 2:

Maybe you could use Datatable colums filtering: https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

Solution 3:

If your code works, simply add the other filter

function( settings, data, dataIndex ) {        
        var filterCato= $("#cato option:selected").text().toUpperCase();
        var filterSubo= $("#subo option:selected").text().toUpperCase();

        var category = String(data[2]).toUpperCase(); 
        var subCategory = String(data[1]).toUpperCase(); 
        
        if ( filterSubo == subCategory || filterCato==category )
            returntrue;
        elsereturnfalse;
    }