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?
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/