Getting the second row of headers in a table

tpdi

With two header rows, one displaying the column name and one for a filter, I need to set "orderCellsTop" : true to prevent clicks on the second, filter row from changing the sort.

<thead>
    <tr>
        <th>User</th>
        <th>Location</th>
    </tr>
    <tr id="filter">
        <th><input/></th>
        <th><select><option value = "">Any</option></select></th>
    </tr>
</thead>

And that's fine, except I can't figure out how to access the second header row ("filter") in the context of a column.

I can do it easily with a footer:

 table.columns().every( function () {
    var that = this;

    $( 'input', this.footer() ).on( 'keyup change', function () {
        that.search( this.value )
            .draw();
    } );

    var selector = $( 'select', this.footer() );

    selector.on( 'change', function () {
        that.search( this.value )
            .draw();
    });

    fillSelects(selector, selectIndexToUrl[this.index()]);
 });

Surely there's as convenient a way to access the th tableheaders in the second tr?

Tocacar

Did you ever figure out how to do this?