Jquery Datatable search box reposition

Question

I want to re position filter box in out of the jquery data table. I want to exactly like this:

How should I do that?

Answer 1

Just relocate the #<table_id>_filter div to the desired position with detach().appendTo() like this :

$("#example").DataTable({
    initComplete : function() {
        $("#example_filter").detach().appendTo('#new-search-area');
    }
});

you can even style how the search filter box should appear in the relocated position :

#new-search-area {
    width: 100%;
    clear: both;
    padding-top: 20px;
    padding-bottom: 20px;
}
#new-search-area input {
    width: 600px;
    font-size: 20px;
    padding: 5px;
}

demo -> http://jsfiddle.net/dq2bmgd9/

Answer 2

You can use the DataTables api to filter the table. So all you need is your own input field with a keyup event that triggers the filter function to DataTables. With css or jquery you can hide/remove the existing search input field. Or maybe DataTables has a setting to remove/not-include it.

Checkout the Datatables API documentation on this.

Example:

HTML

<input type="text" id="myInputTextField">

JS

oTable = $('#myTable').dataTable();
$('#myInputTextField').keyup(function(){
      oTable.search($(this).val()).draw() ;
})

original source Datatables - Search Box outside datatable