Add Element to absolute header of datatable

guptavijay208

I have a datatable with 5 fixed column, I want to add custom filter row in thead section of table.
I am able to add the same perfectly, however due to fixed column, click event to jquery multiselect is binding on the hidden element, and not working on the absolute element as its the clone.

Is there any way I can add elements separately to thead section of class ".DTFC_LeftHeadWrapper" means in the absolute element only not in the hidden after drawing the table.

Below is the screenshot of my datatable, I am able to click on unfreeze column multiselect filter (marked as 3) and not on freeze columns (marked as 1,2)

kthorngren

See if this example for using column search inputs with FixedHeader helps.

Kevin

guptavijay208

Hi @kthorngren thanks for looking to my post, I have already seen the above, when Its is text box it works perfectly, however when I am trying to use muliselect filter plugin in the header, due to duplicacy of freeze column my click event gets bind to the hidden element and not on absolute element.

Below is the reference of multi select plugin I am using
https://www.jqueryscript.net/demo/jQuery-UI-Multiple-Select-Widget/

Below is my code to initialize filter plugin for all the drop down
$(".dropdown_batch"+i).multiselect().multiselectfilter();

And what multiselect filter does is it converts the select box to a button and bind a click event via jquery to it like below

button
        .find('span')
        .bind('click.multiselect', clickHandler);

see below url to see how multiselect gets initialize
https://www.jqueryscript.net/demo/jQuery-UI-Multiple-Select-Widget/jquery.multiselect.js

In my case because of duplicacy of element it is binding to the hidden element not on absolute element, that's why I want a way where I can append elemnt to the absolute element only after the datatable is loaded and columns are freezed, that way my click event will work, may be something like below - (It's not working as of now)

$('.DTFC_LeftHeadWrapper table thead tr:eq(2) th').each( function (i) {
              if(i<5){
          $(this).html( "<select class='form-control dropdown_batch"+i+"' class='dropdown_batch' name='dropdown_batch'   id='dropdown_batch"+i+"' data-error='#errTraceBatchno' multiple='multiple'> <option value='oct-19'>may</option><option value='nov-19'>jun</option> <option value='dec-19'>july</option> </select>" );
        $(".dropdown_batch"+i).multiselect().multiselectfilter();    
    }    
    } ); 

colin

This thread should help, it shows how to add elements to the header in the FixedColumn extension.

If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin