Two filter rows "bSortCellsTop" disables second header filters.

felipe2211

I wanted to have two rows for filtering. The top row should have the sorting. The next row has some custom filters.

When I add this attribute to the datatable: "bSortCellsTop": true,

the functionality of my custom filters do not work. In fact they are not even triggered (using console.log())

here is my datatable set up:

$(document).ready(function () {
table = $('#example').DataTable({
select: {
style: 'multi',
},
"pageLength": -1,
"lengthMenu": [[15, 30, 60, -1], [15, 30, 60, "All"]],
"dom": 'lifrpt',
"bPaginate": false,
"bLengthChange": false,
"bSortCellsTop": true
});

        //listens for filter changes
        table.columns().eq(0).each(function (colIdx) {
            $('input, select', table.column(colIdx).header()).on('keyup change', function () {
                console.log(colIdx)
                if (this.type != "date" && this.type != "select-one") {
                    table
                        .column(colIdx)
                        .search(translateValue(this))
                        .draw();
                } else {
                    table.draw();
                }
            });
        });

It is only when I remove the "bSortCellsTop": true do I get the filters to start triggering again. What am I doing wrong with the filter js listeners?

Any help is much appreciated.

kthorngren

See if this example helps:
http://live.datatables.net/giharaka/616/edit

Kevin