Copy of tfoot showing in the dataTables_scrollBody

professormudd

Link to test case: Coming soon, working on getting a test case together. In the meantime I wanted to go ahead and ask in case the issue is obvious to anyone here.

Description of problem:
I am encountering an issue with my table footer. As you can see in the screenshot, the I have a datatable with a <tfoot>, but for some reason the footer is duplicated. When I inspect the element, I see a <tfoot> with no values in the original table element, and I see the desired <tfoot> in the one contained in the dataTables_scrollFoot div.

Currently I am compensating by doing something like $('#tableId').find('tfoot').remove(); on initComplete and on dt.draw events, but if the window is resized, the blank footer returns to the bottom.

Apologies for not having a test case ready just yet, but I wanted to check if there is something that rings a bell for anyone.

kthorngren

Looks like you might be using footerCallback to perform calculations in the footer. Possibly its something you are doing in the footerCallback. Maybe the test case just needs to replicate the footerCallback.

Kevin

professormudd

Thank you for replying.

I am not using footerCallback. I am doing calculations after initComplete using plain-old javascript/jQuery functions. The table is populated via ajax call. The extra footer shows up before the ajax call is complete. Additionally, the footer was showing up before I wrote the functions to perform the calculations.

colin

Yep, there's so much going on there we'll need that test case,

Colin

professormudd

https://jsfiddle.net/buha9oLf/5/

While building out my test case, I managed to figure out the issue. My issue was caused by setting content via css as well as javascript based on class names.

For example, in my css, I use the content property to have negative values wrapped in parentheses and include a dollar sign in front, like so:

.negMoney::before {
content: '($';
float: left;
}

.negMoney::after {
content: ')';
}

It seems the way to avoid that row appearing after render is to be very specific in the css (and in the js where I do calculations) so as not to include the tfoot that is hidden in the original table:

tbody td.negMoney::before, .dataTables_scrollFoot table tfoot td.negMoney::before {
content: '($';
float: left;
}

tbody td.negMoney::after, .dataTables_scrollFoot table tfoot td.negMoney::after {
content: ')';
}

I just wanted to share in case anyone else runs into a similar issue.

Thanks for this library, I use it very heavily and appreciate the amount of functionality we are able to get from it!

colin

Excellent, glad all sorted and thanks for the kind words,

Colin