How to add a column filter row just below the table header....easy solution for version 1.10:
How to add a column filter row just below the table header....easy solution for version 1.10:
scottapearson
Posts: 3Questions: 1Answers: 0
All of this is taken from **https://datatables.net/examples/api/multi_filter.html**
(note: see the last comment under the Comments tab).
<head>
$(document).ready(function() { // Setup - add a text input to each footer cell $('#example tfoot th').each( function () { var title = $(this).text(); $(this).html( '' ); } ); // DataTable var table = $('#example').DataTable(); // Apply the search table.columns().every( function () { var that = this; $( 'input', this.footer() ).on( 'keyup change', function () { if ( that.search() !== this.value ) { that .search( this.value ) .draw(); } } ); } ); $('#example tfoot tr').appendTo('#example thead');</head>
<body> <<<<<<<<---------- CUT-N-PASTE FROM THE HTML TAB --------------<<<<<<<<<
<div style="border: 1px solid red">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th id="name_footer">Name</th>
<th id="position_footer">Position</th>
<th id="office_footer">Office</th>
<th id="age_footer">Age</th>
<th id="startdate_footer">Start date</th>
<th id="salary_footer">Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
...etc
Replies
Your script has the words "footer" and "tfoot" twice each, to add a filter to the header? Might confuse people.
Also, @Allan - have Vanilla ever thought of issuing a patch to strip punctuation off the end of posted urls? Catches me out every time.