JQuery plugin DataTables separate column filtering on top?

Question

I use this api with DataTables: http://www.sprymedia.co.uk/dataTables/example_multi_filter.html

But how can I put the input to enter above the table, next to “Search all columns”

Answer 1

You can try using CSS:

tfoot { display: table-header-group; } 

Answer 2

You can use the column filter add-on for DataTables. It can be configured to place filters below and above the title bar. See http://jquery-datatables-column-filter.googlecode.com/svn/trunk/dateRange.html , http://jquery-datatables-column-filter.googlecode.com/svn/trunk/numberRange.html and other examples on the site.

Quick update. The two above URLs are invalid. Here's the working one: https://code.google.com/archive/p/jquery-datatables-column-filter/

Answer 3

Put column filtering on top (OR after the header) in jQuery Datatable:

 <script src="~/Scripts/DataTables/jquery.dataTables.columnFilter.js"></script> 

TABLE

 <table class="display table table-hover table-bordered" id="usersShops" width="100%"> <thead> <tr> <th>Shop Name</th> <th>User Name</th> <th>Visit Date</th> <th>IsVisited</th> <th>IsAppdownloaded</th> </tr> <tr> <th>ShopName</th> <th>UserName</th> <th>VisitDate</th> <th></th> <th></th> </tr> </thead> <tbody></tbody> </table> 

Modified column code:

 oTable.columnFilter({ sPlaceHolder: "head:after", aoColumns: [{ type: "text" }, { type: "text" }, { type: "date-range" } ] }); 

Answer 4

I know this is a very old post. But we can achieve this by doing the changes below in your jquery code ...

 $(document).ready(function() { $('#mytable thead td').each( function () { var title = $('#mytable thead th').eq( $(this).index() ).text(); $(this).html( '<input type="text" placeholder="Search '+title+'" />' ); }); $("#mytable thead input").on( 'keyup change', function () { table .column( $(this).parent().index()+':visible' ) .search( this.value ) .draw(); }); });