Jquery Datatable search box reposition

Top25 picture Top25 · Mar 18, 2015 · Viewed 11.8k times · Source

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

enter image description here

How should I do that?

Answer

davidkonrad picture davidkonrad · Mar 23, 2015

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/