Question

177

Changing DOM Element Position of searchbox in datatables

rated 0 times [ 184] [ 7] / answers: 1 / hits: 70777 / 11 Years ago, wed, october 9, 2013, 12:00:00

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

enter

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tiasavannahw

Add To Favorites

Follow

Total Points: 448

Total Questions: 122

Total Answers: 113

Location: Maldives

Member since Tue, Dec 21, 2021

2 Years ago

answered 11 Years ago isham · Accepted Answer

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

});