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

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

Answer 2

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.

Answer 3

Yes you can make a class in your css like:

.pull-left{
    float: left !important;
}

and then add this class to datatable search div using jquery or javascript.

example:

$('.dataTables_filter').addClass('pull-left');

make sure your script is in the head part of your html.

Answer 4

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

Answer 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

Answer 6

The JavaScript Code is "dom": '<"top"f>rt<"bottom"><"clear">',

and CSS div.dataTables_wrapper div.dataTables_filter{ text-align: left; }