Individual column searching (select inputs) - Position on top

Schmakus

Hi,

how could I position the select inputs for column searching at the top of the table?
For example after the <thead>?

Here's my code:

    "initComplete": function() { 
        $( ".dataTables_filter" ).append( '<button class="btn btn-primary paddingLeft" type="button" data-toggle="collapse" data-target="#table-show-options" aria-expanded="false" aria-controls="table-show-options">Optionen</button>' );
        this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                );

                                column
                                        .search( val )
                                        .draw();
                        } );

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

Thank you!

allan

.appendTo( $(column.footer()).empty() )

The code is inserting into the footer element. If you want it at the top you would need to use column.header() - or jQuery to insert into a second row in the header (which would probably be better).

Allan