Move search boxes for each column just below the table header

YoDavish

Hello, I'm using this example below and the search is working just fine.

https://datatables.net/examples/api/multi_filter.html

However, I would like to move the search boxes just below the table header for each column. Is this possible?

DAustin

On line 3 in the example you've linked it shows:

$('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

I suspect something like this should do it (Not tested at all):

$('#example thead th').each( function () {
        var title = $(this).text();
        $(this).html( title + '<br><input type="text" placeholder="Search '+title+'" />' );
    } );

Edit: Just saw line 15, that'll probably need changing too (this.footer --> this.header)

$( 'input', this.header() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );

YoDavish

@DAustin

This was very close to what I'm looking for, except the sort buttons that sort ascending or descending are placed next to each search column box. Any suggestions on how to move them up?

kthorngren

Here is an example I've posted a few times:
http://live.datatables.net/saqozowe/3/edit

Note the use of orderCellsTop to move the sorting function to the top row.

Kevin