DataTables.net how to do filter with select element properly

Question

I am using datatables jquery and I am trying to create different select elements and options and then filter based on the selected options.

Can someone help?

HTMl : here is the select element with options .. (and I have a long table element that didn't paste in here since is to long)

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
      <option></option>
    <option>Cookbook</option>
    <option>Abigail Watson</option>
    <option>4</option>
  </select>
</div>
<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel2">
      <option></option>
    <option>Aibgail Watson</option>
    <option>123 Watson</option>
    <option>4</option>
  </select>
</div>
<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel3">
      <option></option>
    <option>http://www.google.com</option>
    <option>http://www.yahoo.com</option>
    <option>4</option>
  </select>
</div>

JS (using meteor but this is a normal on change event)

Template.main.events({
    "change #sel1": function() {
         dt = $("table").DataTable();
        var indexOfColumnToSearch = 0;
        dt.columns(indexOfColumnToSearch).search($("#sel1").val()).draw();

    },

    "change #sel2": function() {
         dt = $("table").DataTable();
        var indexOfColumnToSearch = 1;
        dt.columns(indexOfColumnToSearch).search($("#sel2").val()).draw();


    },
        "change #sel3": function() {
         dt = $("table").DataTable();
        var indexOfColumnToSearch = 2;
        dt.columns(indexOfColumnToSearch).search($("#sel3").val()).draw();


    },

});

What happens now is the search works but it searches for both words (together and separately) on the option tag instead exact match and also it doesn't filter, example if I choose something for column 1 it will show 3 results but if I want to filter further an select a further option for the select tag on column 2 that is only on column 2 it will show all the result together instead some specific applying the filters of column 1 + column 2

hope the explanation makes sense any help?

Answer 1

You can use DataTables search plug-in to define your own search function:

$.fn.dataTable.ext.search.push(
    function( settings, searchData, index, rowData, counter ) {
        var valFilter1 = $("#sel1").val();
        var valFilter2 = $("#sel2").val();
        var valFilter3 = $("#sel3").val();

        if( searchData[0] == valFilter1 &&
            searchData[1] == valFilter2 &&
            searchData[2] == valFilter3 ){
            return true;
        }
        return false;
    }
);

As the docs state:

the function is called by DataTables for each row in the table whenever it needs to search the data

So your onchange function could be like this:

"change #sel1": function() {
    $("table").DataTable().draw();
}

Note that your custom search function will be added for each datatables instance in your page, so if you have multiple tables you may add further logic in the function.

You can find additional info in the official documentation