display: table-header-group

karmendra

Till now I have used tfoot: {display: table-header-group}
and it worked all fine for many years, table footer was displaying before body,
but today when I did rerun my webpack, table footer is not shown before body anymore.

https://datatables.net/forums/discussion/41960/best-way-to-place-footer-filter-bellow-header

Please suggest what has changed and how do I move my footer row before body now.

Thanks
K

kthorngren

Please suggest what has changed and how do I move my footer row before body now.

We would need to see the problem to help diagnose. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

However if you want a second header then my suggestion is to create a second header instead of moving the footer, like this:
http://live.datatables.net/giharaka/1/edit

Use orderCellsTop to define where the sorting events should be applied.

Kevin

allan

Also, using table-header-group works fine for me: http://live.datatables.net/tulimeja/1/edit . Firefox 101.

Allan

karmendra

Thanks for your responses, I tried this in isolation, and its working as expected, but in my project it isn't behaving as expected, and all this after I did npm install after removing the node_modules folder.

Could it be because of npm getting a version of datatable that isn't compatible. All that said why the simple inline css update in inspector also not reflecting the change.

allan

I'd need a link to a page showing the issue to be able to say why it isn't working. As you note, it works in isolation, so there is something else at play.

Allan

toomanylogins

I am also getting this problem. The style is applied but the search remains at the footer. The problem has only occurred after updating to DT this week using the download builder. I have tested and reverted to previous version which works ok with tfoot positioned below the header.

The old working version is

/*
* This combined file was created by the DataTables downloader builder:
* https://datatables.net/download
*
* To rebuild or modify this file with the latest versions of the included
* software please visit:
* https://datatables.net/download/#bs4/dt-1.13.8/e-2.2.2/b-2.4.2/b-colvis-2.4.2/date-1.5.1/sl-1.7.0
*
* Included libraries:
* DataTables 1.13.8, Editor 2.2.2, Buttons 2.4.2, Column visibility 2.4.2, DateTime 1.5.1, Select 1.7.0
*/

/*! DataTables 1.13.8
* ©2008-2023 SpryMedia Ltd - datatables.net/license
*/

the current with the problem is

/*
* This combined file was created by the DataTables downloader builder:
* https://datatables.net/download
*
* To rebuild or modify this file with the latest versions of the included
* software please visit:
* https://datatables.net/download/#bs4/dt-2.2.0/e-2.4.0/b-3.2.0/r-3.0.3/sl-3.0.0
*
* Included libraries:
* DataTables 2.2.0, Editor 2.4.0, Buttons 3.2.0, Responsive 3.0.3, Select 3.0.0
*/

/*! DataTables 2.2.0
* © SpryMedia Ltd - datatables.net/license
*/

Thanks

kthorngren

@toomanylogins As Allan said please provide a test case showing the issue. There are many ways this can be done and without seeing your solution its difficult to help debug the problem.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

I found this example showing that cloning the footer does work with Datatables 2.2.1. If this doesn't then please provide a test case.
https://live.datatables.net/zijosaze/16/edit

Kevin

kthorngren

I updated my example to use table-header-group instead of cloning the header in JS.
https://live.datatables.net/zijosaze/17/edit

The example still works.

Kevin

toomanylogins

Thanks for reply. Apologies for duplicated post. I had posted before realising the forums are categorised by version. display: table-header-group on its own did not move the tfoot above the body. I resolved the problem using your example but also had to include as follows.

$('#taskTable tfoot tr').insertAfter($('#taskTable thead tr'));

allan

I had posted before realising the forums are categorised by version

I wouldn't worry about the categories too much. I basically never look at the category - simply the "Newest posts" list does nicely .

Allan