Tag: Custom Search Box DataTable

DataTable displaying a default search box while initializing it. So by default DataTable has a search box. But sometimes you might have to remove that default search box and add a custom search box. And place that somewhere in the page. This article will help you to do that.

$('#example').DataTable();

See the above snippet, If your DataTable initializing it like that, then default search box will display. You might think, I can just use “bFilter: false” option to remove that search box. Yes you can! but the problem is if you do that, then DataTable will disable/turn off the search functionality. But you have to only remove the search box not search functionality.

In this case, you can use "dom: 't'" option. This will keep the default functionality of DataTable and just remove the search box, pagination (just hide it). It will just show the table elements.

Here I have shared a code snippet, you can get the idea to accomplish it.

$(document).ready(function() {
  var users = $('#users').DataTable({
    "dom": "t"
  });

  $('#customSearchBox').keyup(function() {
    users.search($(this).val()).draw();
  })
});

See the full jsFiddle