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

Question

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 1

jQuery DataTables author Allan Jardine pointed out a simple way to get this done:

use the bSortCellsTop option, available since version 1.8.

Answer 2

I search a lot about this for a better solution and created the below code. Here you can decide between combo and search boxes by using corresponding class names in your table header cells. The sorting buttons and the column names are in the first row, the filtering options are in the second row.

<table id="example" width="100%">
    <thead>
        <tr>
            <th>Sıra</th>
            <th>SKU</th>
            <th>Stok Adı</th>
            <th>Ana Kategori</th>
            <th>Alt Kategori</th>
            <th>Stok Adedi</th>
            <th>Alt Limit</th>
            <th>Son Giriş Tarihi</th>
            <th>Son Giriş Adedi</th>
            <th>Stok Yaşı</th>
        </tr>
        <tr class="filter">
            <th class="combo"></th>
            <th class="combo"></th>
            <th class="combo"></th>
            <th class="search"></th>
            <th class="search"></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>S49996</td>
            <td>A4-Tech Q Klavye Siyah Ps2 (KM720)</td>
            <td>Ofis Elektroniği</td>
            <td>Klavye - Mouse</td>
            <td>25</td>
            <td>10</td>
            <td>10-10-2015</td>
            <td>78</td>
            <td>89</td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
$(document).ready(function() {

    var table = $('#example').DataTable({
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bInfo": false,
    "bAutoWidth": false,
    "bSortCellsTop": true,
        "scrollY": "300px",
        "scrollCollapse": true,
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var columnIndex = this.index();
                switch ($(".filter th:eq("+columnIndex+")").attr('class')) { 
                                    case 'combo': 
                                        var select = $('<select style="width:100%;"><option value=""></option></select>')
                                            .appendTo( $(".filter th:eq("+columnIndex+")").empty() )
                                            .on( 'change', function () {
                                                var val = $.fn.dataTable.util.escapeRegex(
                                                    $(this).val()
                                                );
                                                column
                                                    .search( val ? '^'+val+'$' : '', true, false )
                                                    .draw();
                                            });

                                        column.data().unique().sort().each( function ( d, j ) {
                                            select.append( '<option value="'+d+'">'+d+'</option>' )
                                        });
                                        break;
                                    case 'search': 
                                        $(".filter th:eq("+columnIndex+")").html( '<input type="text" />' );

                                        $( 'input', $(".filter th:eq("+columnIndex+")") ).on( 'keyup change', function () {
                                            if ( column.search() !== this.value ) {
                                                column
                                                    .search( this.value )
                                                    .draw();
                                            }
                                        });
                                        break;
                }
            } );
        }       
  });
});
</script>