Select filter on header and fixed - wrong option values

FrazeColder

Hey Guys,

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 standart 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..
https://jsbin.com/vigixi/46/edit?html,js,output

My code so far:
https://jsfiddle.net/mk7efqws/7/

Kind regards and Thank you!

FrazeColder

Sorry, this is the working example:
http://live.datatables.net/hepeqiro/55/edit

kthorngren

Here is an example:
http://live.datatables.net/dadereki/1/edit

The only code I changed from the Select input example is the appendTo selector:

.appendTo( $('#example thead tr:eq(1) th:eq(' + column.index() + ')').empty() )

In this case column.index() is the column().index() API to get the column number which is used to select the proper th.

Kevin