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()            $('#table_id').dataTable({           });  }); 

Now What I want is datatables provides a text box in which we can enter our filter string and results will be getting filtered.

So I want to use my existing designed textbox for that purpose I don't want to add a new textbox in the UI. So I gone through this link

http://datatables.net/examples/basic_init/dom.html

But I am not understanding. Is it possible to use the existing textbox. Please advice

See I was having situation like this before implementing this datatables

Now when I apply this datatables plugin A new text box gets added for search I don't want to a new text box I want my existing textbox to implement search functionality.

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 :

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

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