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 change the style of the search input very easy with css

in css File:

.dataTables_filter input {
     background: blue;
}

With Javascript

$(".dataTables_filter input").css({ "background" :"blue" });

Try it by paste this to your console.

Answer 2

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