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)
             return true;
        }
        else if(filterCategory != "-SELECT CATEGORY-") {
            if ( filterCategory == category)
             return true;
        }
  
        return false;
    }
);

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

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

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<select id="cato" class="form-control" >
  <option value="" disabled selected="true">-Select Category-</option>
  <option>Electronics</option>
  <option>Sports</option>
</select>

<select id="subo" class="form-control">
   <option value="" disabled selected="true">-Select Subcategory-</option>
   <option>Laptop</option>
   <option>Mobile</option>
</select>

<table id="example" class="table display">
  <thead>
    <tr>
      <th>Product</th>
      <th>Subcategory</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody id="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 )
            return true;
        else
            return false;
    }