Dynamic fixed height to induce vertical scrolling

0xf00ba11

My use case:
I have a container element which contains a single DataTables table.
This container element has a fixed height and I'd like the child DataTables table header to stick to the top of the container, while the rows of the table vertically scroll.

I know I could use the "scrollY" option, but that doesn't work if I set the value to the height of the container.
It doesn't work because that height value is the height of the rows and not of the whole table package (pagination amount widget, header, rows, footer, etc.).
So it leaves me with vertical scrolling amongst the rows and vertical scrolling of my container.

Ideally (for my use case), when I specify a "scrollY" value, it would mean the whole table package and not just the rows.

I then looked at using the FixedHeader extension, but that won't work for me either, because I require pagination.

Is there anyway to achieve my use case with the current implementation of DataTables and its extensions?

jr42.gordon

Looking at https://datatables.net/reference/option/scrollY , the provided example shows you what I believe the solution to your question is, specifically https://datatables.net/reference/option/scrollCollapse . Set scrollY to height of parent container.

0xf00ba11

Wow, it works perfectly!

I misinterpreted what the "scrollCollapse" setting was supposed to do.

Thank you so much @jr42.gordon !

0xf00ba11

Sorry @jr42.gordon, I jumped the gun.

I made changes to test your suggestion, but my browser had still cached my workaround implementation (in CSS and Javascript), so I was getting a false positive.

I had interpreted "scrollCollapse" correctly and it's not what I'm looking for.

Setting "scrollY" only affects the table rows, but does take into account the table info, table length, page number, etc.
So those extra elements (with their own heights), cause the container (of the table) to overflow, which is not what I want. I just want the table rows to overflow.

jr42.gordon

Do you want the table info to show?

0xf00ba11

Yes.

My workaround involves manually setting the height of table body/rows after the table has been initialised and whenever the window is resized, so that the container is not overflowed and all DataTables elements (info, page numbers, table, etc.) are always visible.

jr42.gordon

There might be a solution within https://datatables.net/extensions/responsive/ , though I haven't used this since it we maintained height similar to what you did.

$(divBlkId+' .dataTables_scrollBody').height(new height);

jr42.gordon

Also, you could add styling to make the bottom info section fixed and then simply add padding or margin -bottom to your table that would clear it.