CODEWITHSUNDEEP
jquerydatatable
Jitender
Jitender

Reputation: 7971

remove default search box and add custom one in jquery datatable

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() ;
})

});

Upvotes: 20

Views: 59070

Answers (5)

Gajendra
Gajendra

Reputation: 1

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

Upvotes: 0

Omer Butt
Omer Butt

Reputation: 411

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

Upvotes: 30

Saji Xavier
Saji Xavier

Reputation: 2360

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>>'});

Upvotes: 1

ithinkisam
ithinkisam

Reputation: 714

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.

Upvotes: 27

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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

Upvotes: 7

Related Questions