Remove default search box and add custom in jquery datatable

Question

I am using jquery datatable. I need to remove the default search box and add a custom option to a different place. I use bFilter:false to remove the search input, but also disables the functionality of the search filter. Any idea how to fix this without using css fiddle

 $(document).ready(function(){ var table= $('#example').DataTable({ paging:false, bFilter:false, ordering:false }); $('#search-inp').keyup(function(){ table.search($(this).val()).draw() ; }) }); 

Answer 1

You can use the dom option to hide the search input without disabling the search function. This is useful if you want to provide your own search input (perhaps column by column or worldwide). It also does what you asked at first - remove the original search without using CSS.

Here is the documentation: https://datatables.net/examples/basic_init/dom.html

And of course, an example:

  var table = $ ('# example'). DataTable ({
         paging: false,
         bFilter: false,
         ordering: false,
         searching: true
         dom: 't' // This shows just the table
     });

You can also use this method to render input elsewhere. Depending on where you should visualize the input, you may not use custom at all.

Answer 2

To hide the default search Input field for AS data tables:
default sDom = "lftipr";

Perform these operations on datatables
'l' - Change length 'f' - Filter input
't' - Table!
'i' - Information
'p' - Pagination
'r' - pRocessing
To remove the default search box, simply remove the f character from sDom.
as:

$ ('# table'). DataTable ({"SDom": "ltipr"});

Hope this should work

Answer 3

bFilter actually removes the search functionality, so I suggest you just hide the default search, and then you can implement your custom search with the code that you already wrote. Just check the code below:

 #example_filter //#example is your table id, so you can replace it with whatever Id you give to table { display:none; } 

Note. Remove bFilter during initialization

Then your normal coding. Here is a demo

Answer 4

As Gururasdad noted, "bfilter": false removes the search functionality. Therefore, you need to use the "dom" option.

Dom also comes with layout and styling features. Therefore, if you need the exact data type, then you should use

$ ('# example'). dataTable ({dom: "& L;" string "LR> <" string "<" Col-XS-12 "t → <" string "<" Col-cm-6 "i> <" Col-cm -6 "p → '});