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.

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

Solution 2

You can define a new element newSearchPlace to have the data table search filter inside:

<div id="newSearchPlace"></div>

Then put the search filter inside this new place:

$("#newSearchPlace").html($(".dataTables_filter"));

Solution 3

To remove the filter options you can use css as mentioned in other answers or you can remove it in the initialisation of the datatable using:

$("#table").dataTable({"bFilter": false}); //disables filter input

or by using sDom attribute like this:

 "sDom": '<"H"lr>t<"F"ip>' //when bJuery is true

See here http://datatables.net/usage/options#sDom for more options.

Now about using your own text field as a filter box then just attach a keypress handler to it, and use the fnFilter option like this:

$(document).ready(function() 

     oTable = $('#table_id').dataTable({
         "sDom": '<"H"lr>t<"F"ip>' 
     });
     $('#myInputTextField').keypress(function(){
         oTable.fnFilter( $(this).val() );
     });
 });

Solution 4

For the actual version in Dec 2018 (v1.10.19) you need to do this steps:

1. Hide the default search box (CSS):

   .dataTables_filter { display: none; }
   

2. Add new filter to your desired place (HTML)

   Search:<br><input type="text" id="searchFilter">
   

3. After your DataTables inicialisation function you need to write your search function (JS):

   $(document).ready(function() {
      var table = $('#example').DataTable();
   
   $('#searchFilter').on( 'keyup', function () {
      table.search( this.value ).draw();
   } );
   

Note: fnfilter is deprecated, so use search(), but search() doesn't redraw the table, so you need to use draw() too.

Solution 5

As of DataTables 1.10, a dom property can be added to the initialization. Although it is quite hard to master, it can be used to wrap all of the DataTables objects within <div> elements to style the built-in table control elements.

A dom property like the following would wrap the default search bar with a <div> of your choice, which can be used to pull left (where f is the filtering/search bar and t is the table:

$('#example').dataTable( {
  "dom": '<"pull-left" f><t>'
} );

Output:

<div class="pull-left">
  <div id="example_filter" class="dataTables_filter"><label><input type="search" aria-controls="example"></label></div>
</div>
<div>
  <table id="example" class="table dt-responsive nowrap dataTable no-footer dtr-inline" style="width: 100%;" role="grid">
</div>  

More info: DataTables dom option

View more solutions

Comments

[Danny]

So you want the existing textbox not to do filtering?

[Nikhil Agrawal]

@Danny I want the existing textbox to filtering functionality But I don't want a new textbox...... Means I want search functionality in the textbox which I have before implementing datatables.

[davidkonrad]

"bFilter": false disables the search / filter capabilities completely, not just hiding the default search box - so that is an odd answer to a question where the goal is to have filter capabilities, just on another text box. Also,sDom is useless / irrelevant in this context - apparently it cannot be said too often : sDom is for setting the order and position for dataTables generated elements, nothing else!

[MaVRoSCy]

Yes you are right about the bFilter, i noted that in my answer that it disables the functionality. Now about the sDom, by removing the f from the expression, the filter disappears (datatables.net/release-datatables/examples/basic_init/dom.h‌​tml).

[davidkonrad]

It is only the case if you actually use sDom, which is not nessecary. And there is no sDom present in question. In fact, OP writes "...using this code" -> and an empty initialization part.

[Simon Bengtsson]

Instead of hiding the default search box you can completely remove it by setting the bFilter: false in the datatable constructor. EDIT: That disabled the custom search boxes as well so it doesn't work after all...

[davidkonrad]

@SimonBengtsson, Yes, bFilter : false completely suppress the filtering capabilities.

[Ryan Kohn]

To get closer to the way the filter box works in DataTables, you can add more event bindings to your input: $("#searchbox").bind('keyup search input paste cut', function () {...});

[davidkonrad]

@RyanKohn, Yes, but most important, you are not "slave" to the dataTables-way. Very convenient to implement a search that only is triggered when the user hits enter, for example.

[Simon Bengtsson]

Instead of hiding the default filter with css you can omit the f letter in the dom option which remove the input completly. An example can be found in the docs.

[davidkonrad]

@SimonBengtsson, yes - if you are using the dom-attribute this is an alternative. It does not disable filter / search capabilities.

[rob]

This answer is really underrated. This worked best for having 20+ dynamically generated datatables in my case,. The other options caused excessive events to be fired even with unbind() and caused weird slowness as the highest upvoted answer caused well over 10 events per keystroke.

[Shankar]

Best solution also for multiple tables on same page !

[mastersuse]

Hi, just wanna know, where is the file location in datatables folder in stored locally that need to change for .dataTables_filter { display: none; } ?

[mastersuse]

sorry, please ignore above comment, just find where to put .dataTables_filter { display: none; } cheers.

[Ray Caballero]

This is the fastest way to do it!