Changing DOM Element Position of searchbox in datatables

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

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.

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

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