Datatables - Search Box outside datatable

jquery search datatables filtering
Athanasios Emmanouilidis picture Athanasios Emmanouilidis · May 13, 2011 · Viewed 188.5k times · Source

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 ?

Answer

netbrain picture netbrain · May 13, 2011

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

Related questions

jQuery Datatables : Searching and filtering with Ajax pagination

I have a SQL table with 36000 entries to show in a Datatables list. The pagination works well since I develop it like this : var table = $('.datatable').DataTable({ pageLength : 20, lengthChange : false, processing : true, serverSide : true, ajax : { url :"ajax.php", type: "…

Read More
jQuery DataTables - Filter column by exact match

Trying to only display exact matches to the search term entered in the search bar. For instance, I have a search bar that filters by ID#. I want only records that match the exact # entered to display. So if 123 is …

Read More
How to search JSON tree with jQuery

I have a question about searching the JSON for the specific information. For example, I have this JSON file: { "people": { "person": [ { "name": "Peter", "age": 43, "sex": "male" }, { "name": "Zara", "age": 65, "sex": "female" } ] } } My question is, how can find a particular person …

Read More