Changing DOM Element Position of searchbox in datatables

Question

Actually I am new to jQuery datatables plugin.

I have attached the plugin to my tables using this method using this code.

$(document).ready(function() 
         


        

Answer 1

This is very simple. First you must hide the default search box :

.dataTables_filter {
   display: none;
}

Example of your own designed search box, placed somewhere in the HTML :

script to search / filter when typing in the search box

$("#searchbox").keyup(function() {
   dataTable.fnFilter(this.value);
});    

working demo -> http://jsfiddle.net/TbrtF/

If you are using DataTables 1.10 the JS should look like:

$("#searchbox").on("keyup search input paste cut", function() {
   dataTable.search(this.value).draw();
});