Dynamically create footer for DataTables with scroller - two footers inserted

DB10

Apologies if this ends up being double posted

I have a DataTable that receives its column definitions and data in an Ajax call. The below example and jsbin is simplified and for illustrative purposes only but, basically, I'm setting up individual column filtering except for certain columns (based on those column definitions). DataTables have an example of individual column filtering at

https://datatables.net/examples/api/multi_filter.html

This works well but when I change the initialization of the table and add a vertical scroller, I end up with two footers - one in the dataTables_scrollBody and another in the dataTables_scrollFoot

For certain cells in the footer, I want to disable column filtering and instead apply a custom search and I do so by applying a class to those cells. In the example I've setup, this is the customSearch class. When I added a vertical scroller, my custom search stopped working and this was because my $('.customSearch').val() no longer finds the value typed into the cell. It was then I checked the length and realized the selector returned two elements and not one as it does before the vertical scroller is enabled.

Hopefully the above makes sense but, in short....

A table with headers and footers is dynamically generated based on an Ajax call. Individual column filtering is working but when I change the initialization of the DataTable to add vertical scroller, two footers is inserted and this breaks my custom search. Am I setting up the table wrong or why is it that I end up with two footers?

The example setup can be found at

https://jsbin.com/madenupuzi/

Thanks in advance for your help

colin

Hi @DB10 ,

I might be missing something, but I'm not seeing two footers in that example you posted. Could you provide steps on how to reproduce with that example, please.

Cheers,

Colin

DB10

Hi Colin,

Apologies for the late reply, I went on extended holidays after posting that quesiton and only just came back!

If I check the html using dev tools I can see the below under scrollBody

and also under scrollFoot

I'm probably doing something insanely stupid but this only happens when I add a vertical scroller. Again, I'm a complete novice but the reason I noticed this, or thought/think I see this, was because I couldn't reference the value entered into that customSearch (realized there were two when I checked the length).

Thank you for your kind help

allan

I'm probably doing something insanely stupid

Not at all! What you describe is how DataTables works when scrolling is enabled. Its a little counter intuitive at first, but in order to have the table body scrolling independently of the header and footer we split the table into three individual tables. We need to insert a cloned copy of the header and footer into the body (but hidden as Colin notes) in order to ensure the columns are aligned between the three individual tables.

Use table().footer() if you want the table tfoot element which will get the correct element regardless of scrolling being enabled.

Allan

DB10

Thanks heaps Allan. I'm equally grateful for your answer, and solution, as I am to you trying to give me an out for what was indeed my stupidity

Thanks so much to both yourself, Allan, and also Colin, much appreciated.