Remove Default Search Box and Add Custom Box in 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.


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() {$(this).val()).draw();

See the full jsFiddle