remove default search box and add custom one in jquery datatable

Question

I am using jquery datatable. My required is to remove default search box and add custom one in difference place. I use bFilter:false for remove the search input but it is also disabling search filter functionality. Any Idea how to fix it 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() ;
})

});

Just remove the <input type="text" id="search-inp"> and keep the id to set it to your custom input, you can also place it wherever you need (I managed to place the search text at bottom, so technically you can do whatever you want). — Anwar
– Anwar, Commented Apr 21, 2015 at 10:49

code_aks · Accepted Answer · 2020-04-01 17:43:35Z

30

For Hiding Default Search Input box of Data tables AS:
by default sDom="lftipr";

Perform these operations on datatables
'l' - Length changing
'f' - Filtering input
't' - The table!
'i' - Information
'p' - Pagination
'r' - pRocessing
For removing default search box just remove the f character from sDom.

like:

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

Hope this must work

edited Apr 1, 2020 at 17:43

code_aks

2,0742 gold badges16 silver badges29 bronze badges

answered Jul 13, 2017 at 6:10

Omer Butt

4114 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ithinkisam Over a year ago

This uses the legacy API and is a suitable answer if you can't upgrade to the current version of DataTables.

Asad Naeem Over a year ago

let oTable = $('#tableName').DataTable({ "sDom": "ltipr", "searching": true)}; there are other options to hide that box searching: false but that also stops custom filtration on client side. So this is the most logical answer as custom searching/filtration is still working.

ithinkisam · Accepted Answer · 2016-09-09 17:51:13Z

You can use the dom option to hide the search input without disabling the search functionality. This is useful if you want to provide your own inputs for searching (perhaps on a column by column basis, or globally). It also accomplishes what you asked for initially - remove the original search input 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 could also use this method to render the search input in a different place. Depending on where you need to render the input, you may be able to avoid using a custom one altogether.

Guruprasad J Rao · Accepted Answer · 2015-04-21 11:35:22Z

7

bFilter actually removes the search functionality so what I suggest it just hide the default search and then you can implement your custom search with the code you have already written. Just check below code:

#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 the DEMO

answered Apr 21, 2015 at 11:35

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

Comments

Saji Xavier · Accepted Answer · 2017-08-24 07:00:03Z

1

As Guruprasad mentioned, 'bfilter': false removes the search functionality. So you need to use the 'dom' option.

Also dom comes with markup and styling functionalities. So if you need the exact datatable styling then you should use

$('#example').dataTable( {dom: '<"row"lr><"row"<"col-xs-12"t>><"row"<"col-sm-6"i><"col-sm-6"p>>'});

answered Aug 24, 2017 at 7:00

Saji Xavier

2,40019 silver badges23 bronze badges

Comments

Gajendra · Accepted Answer · 2022-01-16 08:55:50Z

0

Simply add this to your css
.dataTables_filter { display: none;}

it will hide default search box and you can use your own search box, there is no need for bfilter : false

answered Jan 16, 2022 at 8:55

Gajendra

12 bronze badges

Collectives™ on Stack Overflow

remove default search box and add custom one in jquery datatable

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related