Search in Header

KevinW

Hi. my current code fires the sort when someone selects the field to search. How do I make it so that there are two rows in the header, and the second row is used for searching, and the top row is used for sorting. Here is my current code:

    jQuery(document).ready(function () {
     $('#person_table').DataTable( {
    initComplete: function () {
        var api = this.api();
        api.columns([2,3,4]).indexes().flatten().each(function ( i ) {
            var column = api.column( i );
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.header()) )

                .on( 'change', function () {
                    var val = $(this).val();
                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );

            } );

        }
    } );
});