Column filtering with select inputs

DevTN

Hello, I want to add column filtering to my datatables as on this example https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html but instead of search inputs I added select inputs.
I want to check the unique values of each column and append the values as options inside my select.

Basically what I did :

1. clone tr in theadand give it an id

2. foreach th I append a select

3. on initComplete i check unique values of each column liveTable.columns( k ).data().eq( 0 ).unique().sort()

4. loop through the unique array and add each item between option tag

5. append all the options inside my select

I am getting the error jquery.dataTables.min.js:30 Uncaught TypeError: Cannot read property 'sDefaultContent' of undefined

I commented my code so that you have a clear explanation. Any suggestions please what I am doing wrong ? Thank you very much.

here is the demo link on jsfiddle https://jsfiddle.net/zkyL6ca2/1/

colin

Because you're cloning the select elements, you have 44 of them. So, when you iterate through on line 53, you're incrementing k beyond the 22 columns, meaning columns(k) on line 57 in invalid above 21.

Colin

DevTN

I see the issue but when i use $('#liveTable thead tr:eq(1) th .added').each(function() {... }); it will loop only through the select inputs I need but then it doesn't append the options. it shows only all. any ideas why please ? here is the updated jsfiddle https://jsfiddle.net/b1Lc9j2f/

DevTN

Thank you i figured it out. it should be $("tr:eq(1) th:eq(" + k + ") .added").append(option);