tfoot renders after thead and before tbody

jeffw

Allan, I noticed this at http://www.datatables.net/usage/:

"Defining the 'tfoot' section is optional from the view point of DataTables, and if defined will be used in a similar manner to how thead is used, with the exception of not being able to use it to sort data."

In my original markup the tfoot node comes after tbody, but when dataTables renders it, it's moving tfoot between thead and tbody. Is there a setting somewhere where i can keep it at the end?

thanks again for a great plugin, it's really amazing.

jeffw

This approach works, but I was hoping there's a way to do it in the dataTables object. I've had some surprises when I do some things through dataTables vs through the DOM.

$('table.dataTable tfoot').each(function () {
$(this).insertAfter($(this).siblings('tbody'));
});

aaronw

I guess one question is why do you want the tfoot after the tbody? It shouldn't make a huge difference.

jeffw

This is a responsive page; in mobile view the tables are rendered with the TH headers to the left of each element instead of on top of each column. In the mobile view the footer ends up on top.

Since we're not using sortable headers in the mobile view, the other approach i could use is to disable dataTables using something like enquire.js for mobile widths.

allan

I'm a bit confused as well. I don't really see what difference the Dom order of the three table elements makes (tbody,thead and tfoot). Can you link to a page showing the problem please? The html spec actually says that thead and tfoot must come before the tbody element, but I've not seen a browser that doesn't cope with them in any order.

Allan

jeffw

Thanks Allan; I didn't know the spec said tbody comes after tfoot.

The problem i'm having is getting it to work with some responsive CSS (no-more-tables.css), where we render the table headers to the left of the the TD contents for each row. For these, the tfoot is appearing at the top (as that's how the code flows) but we need it at the bottom.

I can just use the jquery workaround to manually rearrange them in order to get it to work as needed.

allan

So you'd managed to get the THEAD to show as a column - is that correct? The table has been pivoted effectively? I'm very interested in how you've done that, as that is something I'd like to look at building into DataTables or as a plug-in.

If you are able to show us a code example of what you are working with, we might be able to help resolve the issue.

Regards,
Allan

jeffw

Not really a pivot, more like a CSS trick using data attributes. Similar to No More Tables option here:

http://elvery.net/demo/responsive-tables/

allan

Ooo - that is neat! So you've implemented that and it works with DataTables? But the tfoot is messing it up?

Bookmarked to play with :-)

Allan

jeffw

Seems to work great with DataTables, except for the tfoot issue, which was easily solved by moving tfoot node after tbody using query's $(document).ready().

allan

Looking at the CSS for the No More Tables option, can't you just hide the footer in the same way that the header is hidden?

[code]
thead tr,
tfoot tr {
position: absolute;
top: -9999px;
left: -9999px;
}
[/code]

It doesn't look like there is anything which is DOM position specific.

Allan

jeffw

They hide the thead because the column headers get rendered to the left of the data elements.

But in this case, the footer text is like a footnote for the whole table, it doesn't map to td cells. So we still want it to appear across the bottom.

allan

Perhaps you should use a `caption` tag for that rather than a footer in that case?

Allan