Click event trigger in fixed column header

jbaker

See test case here: https://jsfiddle.net/j5c2es19/

Issue I'm having is with trying to add column filters to fixed column headers. It works great when the filter is just a select, but when I use select2 the dropdown will not drop. (can test by commenting and uncommenting line 3 of js code) Is there a way to attach an event listener to the cloned select and have it fire the dropdown event on the original one or something of that nature to make this work?

colin

FixedHeader adds a layer over the top of the table to enable the scrolling, so any element you add to a fixed column, needs to be attached to that layer, not the layer of the main table.

This example here should demonstrate that. You'll see it's adding the input elements to div.dataTables_scrollHeadInner

Colin

jbaker

http://live.datatables.net/diwapewa/169/edit?html,css,js,output

Took that code and modified it to get select2 boxes, and it does the same. All the ones that aren't in the fixed column drop down just fine, but the first one won't open.

allan

It's because this selector doesn't pick up the fixed header cell:

$('div.dataTables_scrollHeadInner thead tr#filterboxrow th')

div.DTFC_LeftHeadWrapper tr:eq(0) th should do it but it isn't as simple as that unfortunately. The header can be recreated and you'd need to initialise it after every rebuild.

If it is acceptable in your UI, this is something that SearchBuilder might be well suited for.

Allan