Datatables - Search Box outside datatable

Question

I'm using DataTables (datatables.net) and I would like my search box to be outside of the table (for example in my header div).

Is this possible ?

Solution 1

You can use the DataTables api to filter the table. So all you need is your own input field with a keyup event that triggers the filter function to DataTables. With css or jquery you can hide/remove the existing search input field. Or maybe DataTables has a setting to remove/not-include it.

Checkout the Datatables API documentation on this.

Example:

HTML

<input type="text" id="myInputTextField">

JS

oTable = $('#myTable').DataTable();   //pay attention to capital D, which is mandatory to retrieve "api" datatables' object, as @Lionel said
$('#myInputTextField').keyup(function(){
      oTable.search($(this).val()).draw() ;
})

Solution 2

As per @lvkz comment :

if you are using datatable with uppercase d .DataTable() ( this will return a Datatable API object ) use this :

 oTable.search($(this).val()).draw() ;

which is @netbrain answer.

if you are using datatable with lowercase d .dataTable() ( this will return a jquery object ) use this :

 oTable.fnFilter($(this).val());

Solution 3

You can use the sDom option for this.

Default with search input in its own div:

sDom: '<"search-box"r>lftip'

If you use jQuery UI (bjQueryUI set to true):

sDom: '<"search-box"r><"H"lf>t<"F"ip>'

The above will put the search/filtering input element into it's own div with a class named search-box that is outside of the actual table.

Even though it uses its special shorthand syntax it can actually take any HTML you throw at it.

Solution 4

This one helped me for DataTables Version 1.10.4, because its new API

var oTable = $('#myTable').DataTable();    
$('#myInputTextField').keyup(function(){
   oTable.search( $(this).val() ).draw();
})

Solution 5

I had the same problem.

I tried all alternatives posted, but no work, I used a way that is not right but it worked perfectly.

Example search input

<input id="searchInput" type="text"> 

the jquery code

$('#listingData').dataTable({
  responsive: true,
  "bFilter": true // show search input
});
$("#listingData_filter").addClass("hidden"); // hidden search input

$("#searchInput").on("input", function (e) {
   e.preventDefault();
   $('#listingData').DataTable().search($(this).val()).draw();
});

View more solutions

Comments

[Hoàng Long]

@Marcus: actually I feel that sDom is not quite elegant to use, put aside the fact that we can't fully customize the search box (there's a hardcode "Search" text in that box).

[Artur79]

but its still inside div.datatables_Wrapper, any way to move it outside of it as well ?

[mekwall]

@Artur79 Sadly no. Not without hacking the source of Datatables, at least.

[Sævar]

You should definitely use .keyup instead of .keypress, otherwise you'll experience a delay in results

[MattSizzle]

I messed with putting $(".dataTables_filter :input").focus().val(value).keypress(); in the keyup on my input for about an hour, before finding this. Never though to use the API.. Elegant solution!

[Shane Grant]

The JS needs to change to use .search( $(this).val() ).draw() in place of fnFilter. See: datatables.net/manual/api#Chaining I changed this answer to fix it, but it appears it needs to be peer reviewed first.

[bang]

Remark: You will still need the "searching: true" option, and then you probably want to hide the default searchbox so just set the sDOM option to null.

[bang]

...or to the correct format of your choice of course :) More info : datatables.net/examples/basic_init/dom.html

[shabeer90]

oTable.fnFilter($(this).val()); Worked for me too,

[Lionel]

Instantiating $().dataTable() with a small "d" will return a jQuery object rather than a DataTables API instance. The latter can be achieved by calling "oTable = $('#myTable').DataTable();" with a capital "D". This is required to be able to call .search on it (if will throw a "function undefined" error otherwise). See: datatables.net/faqs/#api

[Lionel]

Note the capital "D" of "var oTable = $('#myTable').DataTable();" (datatables.net/faqs/#api)

[Cristian E.]

<333 this syntax '<"search-box"r><"H"lf>t<"F"ip>' not sure if something worse exists

[Lvkz]

Both methods are valid, depending on how are you calling the datatable: ` oTable.search($(this).val()).draw() ;` you use when you call it: .DataTable() and this one: oTable.fnFilter($(this).val()); when you use .dataTable() The difference is at the capital D. Hope it helps!

[Daniel Dudas]

Or if you use a newer version of datatable you will have: "drawCallback": function (settings) { $(".dataTables_filter").each(function () { $(this).appendTo($(this).parent().siblings(".panel-body")); }); },

[M.C.]

The question was to change the position of the dynamically created . Putting it OUTSIDE the table

[Ege Bayrak]

Gives a "oTable.fnFilter is not a function" error for datatables version 1.10.5

[Phoenix]

stackoverflow.com/questions/40504608/… Can anyone have a check on this?

[Tanya]

And to keep the full search functionality, the search string needs to be displayed after refresh in the custon input. This line do the job for me: $('#myInputTextField').val(oTable.search());

[Praburaj]

@netbrain I have the same problem but your solution doesn't work for me.

[Praburaj]

@netbrain My code js file link is here pastebin.com/SDe3wCPf. I always get no records when i start typing in my input field.

[netbrain]

@prabu try adding the searching: true option.

[Flimm]

@HoàngLong you actually can customise the search box using options like this: language: { search: "example", searchPlaceholder: "example" }

[Kiren S]

Search was not working for me. But when I changed $('#myTable').dataTable(); to $('#myTable').DataTable(); it started working

[Nick Taras]

Thank you for this answer - saved me some time looking through the docs. For my use with the Angular JS version of this library - you can use an implementation like so: vm.dtInstance.DataTable.search(event.value).draw();

[Ghis]

Just figured that with jQuery you can also access Database API like this : oTable.api().search($(this).val()).draw(); It can be useful, especially if you want manual control over pagination length as well : oTable.api().page.len($(this).val()).draw();

[Sravan]

Thanks for the hint of hiding search input and "input" event. But mind you, you are instantiating another DataTable inside .on("input".

[mending3]

is this applicable for server side?