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
Thanks in advance for your help
I'd forgotten that I'd posted this but I'd also posted on the datatables forum where I was told that this is what happens when using a scroller and how the table is inserted into a header, body and footer. To obtain the original footer, I was told, I believe, that one had to use table().footer() and that did indeed work.