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

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:
   
   

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.