Select filter on header and fixed - wrong option values

Question

I want to have a DataTable with a sticky header where I can filter with selects the columns. I want to have the select inputs as sticky header, so it needs to be on the second header column. This is why I have modified the standard code from the DataTables documentation.

This is how it should be by documentation :

var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

I have changed it to:

var select = $('<select><option value=""></option></select>')
                            .appendTo( $('#contact_overview_table thead tr:eq(1) th').empty() )
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

However, now the select option values are wrong... How can I fix this?

Here you can find a working demo which I found while I was searching for a solution. Except the select inputs aren't sticky.. http://live.datatables.net/hepeqiro/55/edit

My code so far:

 var table; var groupColumn = 1; $(document).ready(function() { table = $('#contact_overview_table').DataTable( { "displayStart": 0, "language": { "url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/German.json" }, "columnDefs": [ { "visible": false, "targets": groupColumn } ], "order": [[ groupColumn, 'asc' ]], "processing": true, "pageLength": 100, orderCellsTop: true, fixedHeader: true, "drawCallback": function ( settings ) { var api = this.api(); var rows = api.rows( {page:'current'} ).nodes(); var last=null; api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) { if ( last !== group ) { $(rows).eq( i ).before( '<tr class="group"><td colspan="15" style="font-weight: bold;">'+group+'</td></tr>' ); last = group; } } ); }, initComplete: function () { this.api().columns().every( function () { var column = this; var select = $('<select><option value=""></option></select>') .appendTo( $('#contact_overview_table thead tr:eq(1) th').empty() ) .on( 'change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search( val ? '^'+val+'$' : '', true, false ) .draw(); } ); column.data().unique().sort().each( function ( d, j ) { select.append( '<option value="'+d+'">'+d+'</option>' ) } ); } ); }, }); // Order by the grouping $('#contact_overview_table tbody').on( 'click', 'tr.group', function () { var currentOrder = table.order()[0]; if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) { table.order( [ groupColumn, 'desc' ] ).draw(); } else { table.order( [ groupColumn, 'asc' ] ).draw(); } } ); } ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script> <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js" type="text/javascript"></script> <script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script> <link href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.bootstrap.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div id="contact_overview_table_div" class="table-responsive"> <table class="table table-striped table-bordered" id="contact_overview_table"> <thead> <tr> <th class="text-center">ID</th> <th class="text-center">Art</th> <th class="text-center">Anrede</th> <th class="text-center">Titel</th> <th class="text-center">Vorname</th> <th class="text-center">Name</th> <th class="text-center">Firma</th> <th class="text-center">Straße</th> <th class="text-center">Ort</th> <th class="text-center">Mobil</th> <th class="text-center">Actions</th> </tr> <tr> <th class="text-center">ID</th> <th class="text-center">Art</th> <th class="text-center">Anrede</th> <th class="text-center">Titel</th> <th class="text-center">Vorname</th> <th class="text-center">Name</th> <th class="text-center">Firma</th> <th class="text-center">Straße</th> <th class="text-center">Ort</th> <th class="text-center">Mobil</th> <th class="text-center tfoot-hide-select">Actions</th> </tr> </thead> <tbody> <tr> <th>1</th> <th>Customer</th> <th></th> <th>Porf</th> <th>Max</th> <th>Müller</th> <th></th> <th></th> <th>Berlin</th> <th>+21 431 8912</th> <th class="text-center">Actions</th> </tr> <tr> <th>2</th> <th>Customer</th> <th></th> <th></th> <th>Tim</th> <th>See</th> <th></th> <th></th> <th>Stockholm</th> <th>+44 123 5763</th> <th class="text-center">Actions</th> </tr> <tr> <th>1</th> <th>Supplier</th> <th></th> <th>Dr</th> <th>Philipp</th> <th></th> <th></th> <th></th> <th>New York</th> <th>+49 241 4513</th> <th class="text-center">Actions</th> </tr> <tr> <th>2</th> <th>Supplier</th> <th></th> <th></th> <th>Max</th> <th>Hue</th> <th></th> <th></th> <th>Los Angelas</th> <th>+44 124 1341</th> <th class="text-center">Actions</th> </tr> </tbody> </table> </div> 

Kind regards and Thank you!

Answer 1

initComplete: function () {
                this.api().columns().every( function (z) {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $('#contact_overview_table thead tr:eq(1) th:eq('+z+')').empty() )
                        .on( 'change', function () { 
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            ); 

                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );                                    

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