Datatable Search Filter

Datatable is a jQuery plugin which provides a great interface when it comes to display a table with quite a large number of rows. It helps in paging, sorting and several functionalities with only installing a simple plugin in our application. This page is to know how searching for a string can be done using datatable search filter.

Consider the datatable below -

dt image

 

Search a single text in the datatable

Let's say the id of the table is `test_datatable_filter`. To search for only the first column, we can get the input from the search input field(id = `search_filter`) and use it in the "search()" function which comes with the core datatable features.

Eg -

$('#search_filter').on('change', function () {
  $('table#test_datatable_filter').DataTable()
      .column('first-column')
      .search($(this).val(), true, false)
      .draw();
});

Search Multiple String

To search for more than one keyword, use a "|" separator. This might be a requirement if the search input is a multi-select field. So the above code for multiple search keywords -

$('#search_filter').on('change', function () {
  search_string = '';
  //join the array of search strings with a separator - "|"
  if ($(this).val()) {
    search_string = $(this).val().join('|');
  }
  $('table#test_datatable_filter').DataTable()
      .column('first-column')
      .search(search_string, true, false)
      .draw();
});

See the documentation to check the description of the parameters for this search function.