mg1075 mg1075 - 2 months ago 25
Javascript Question

jQuery DataTables two rows in head: first row column names and sorting, second row filtering

In older versions of datatables (up to 1.7.?), I used to be able to have a table with a two row column header, where sorting was done in the top row, and included the column name, and filtering with inputs and selects was done in the second row.

<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td><input type="text" /></td>
<td><select><option ....></select></td>
<td><input type="text" /></td>
</tr>
</thead>
<tbody>...


With higher versions, including the latest (1.9.0), this no longer works, because the sortable header is getting applied to the second row instead of the first row.
Is there a way to get this working without resorting to an additional plug-in such as
http://code.google.com/p/jquery-datatables-column-filter/ ?

Answer

jQuery DataTables auther Allan Jardine pointed out a simple way to get this done: use the bSortCellsTop option, available since version 1.8.

http://datatables.net/ref#bSortCellsTop

( http://datatables.net/ref )

http://datatables.net/forums/discussion/9046/two-rows-in-thead-first-row-for-sorting-second-row-for-column-filtering

+1 for jQuery DataTables!

Comments