JS Datatables - filtering table from combo box in header

Question

I have the following datatable which uses the js datatable plugin from https://datatables.net/

The datatable is set using the following JS:

$(document).ready(function () {
    $('#tracerTable').DataTable({
        "bInfo": false,
        "order": [[2, "desc"]], //order by date created
        "aoColumnDefs": [
            { aTargets: [3], "bSortable": false },
            { aTargets: [4], "bSortable": false },
            { aTargets: [5], "bSortable": false }
        ]
    });
}

Question: Is it possible to update the JS to allow me to filter on the 'Type' column using a dropdown with tickbox options within in the table header (just like the filter option in excel - see image below). I would want this for selecting Water and Oil Tracers, but not showing Gas tracers.

If this is not possible within the datatable plugin, can anyone suggest a plugin which would provide this functionality?

Answer 1

Make use of the bootstrap-select plugin, append it to the header of your DataTables by targeting the desired column (in your case 1), get the checked values, join it with | (the or operand) then use search API.

var table = $('#example').DataTable({
  initComplete: function() {
    this.api().columns([1]).every(function() {
      var column = this;
      var select = $('<select class="selectpicker" data-show-content="false" data-none-selected-text="Position" multiple><option value="" >Show All</option></select>')
        .appendTo($(column.header()).empty())//use $(column.footer() to append it to the table footer instead
        .on('changed.bs.select', function(e) {
          var val = $(this).val();
          var fVal = val.join("|")
          column
            .search(fVal, true, false)
            .draw();
        }); //select

      column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d + '</option>')
      }); //column.data
    }); //this.api
  } //initComplete
});

Fiddle for more details, I suggest moving the filter function on the footer as clicking the dropdown button on the table header will sort the table.