Click event trigger in fixed column header

Click event trigger in fixed column header

jbakerjbaker Posts: 2Questions: 1Answers: 0

See test case here:

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?


  • colincolin Posts: 12,877Questions: 0Answers: 2,198

    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


  • jbakerjbaker Posts: 2Questions: 1Answers: 0,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.

  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin

    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.


Sign In or Register to comment.