Paging buttons issue

mdellanave83

Hi,
I'm facing an issue regarding the paging buttons, sometimes, if the dataTable is not visible in dom, the buttons do not render as expected.

In this example there are 14 items as ajax dataSource and a pageLength of 5.
https://codesandbox.io/p/sandbox/datatable-scroll-body-forked-2f47h6

The paging buttons should be 1,2 and 3 but if you try to refresh the preview page, sometime just the button 1 appears.

I use tables in wizard steps, so this kind of issue force me to do a table.draw on each steps that contains a table.

is it possible to fix it somehow?

kthorngren

I wonder if using columns.adjust() in this event handler will solve the issue:

document.querySelector("button[data-show]")?.addEventListener("click", (e) => {
  document.querySelector(".table-responsive")?.classList.remove("d-none");
});

Use it after the table is made visible. I don't believe you need to use draw() with columns.adjust(). I would try it but I don't have an account on that platform to make changes.

Kevin

mdellanave83

Hi Kevin, yes it works also with table.columns.adjust()

I was wandering if it can be solved internally in dataTables instead of call any kind of function on the table.

I think it's a matter of width size, if the element in the dom is not visible, the paging can't calculate the available space to draw the buttons correctly, maybe using a ResizeObserver in dataTable could help to resolve?

allan

OMG! I wasn't aware of ResizeObserver. I've tried rather hacky experiments with object and iframe before to do resize calculations automatically, but I've never liked them enough to integrate them into DataTables core.

Now that you've let me know about this (which is slightly embarrassing since it appears to have been in Chrome since 64 and Firefox from 69!) this is going into DataTables 2.2 - no question. I'm very tempted to implement this next week and release what was going to be 2.1.9 as 2.2.0 in fact. Let me think on that a little. But yeah, that's going in.

Allan

mdellanave83

nice to hear you allan!
I appreciate your enthusiasm for the little things :-)

also for me ResizeObserver was a big surprise when I discovered it because, as you know, managing resizing was a mess before.

enjoy it and thanks again for your interest and support

plus: take a look also to the MutationObserver, just in case

allan

MutationObserver I was aware of, but haven't do anything with it yet. I prefer to have data changes for DataTables done through the API. Maybe in future something will come up.

Certainly feeling inclined to do a 2.2.0 release with this soon. Just need to get the time to do it!

Allan