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/