Scroll position reset during dt.ajax.reload with DataTables Responsive and details opened

dtkra

Hi everyone,
I’m working on a project using DataTables with its Responsive extension, and I’ve encountered an issue when calling dt.ajax.reload.

When a user expands one or more rows to view their details (using the Responsive feature) and scrolls the table, the scroll position resets whenever ajax.reload is triggered. This happens consistently whenever the data is reloaded.

I’d like to know:

Is this something that DataTables should handle natively, and I might be misconfiguring it?
If this is something I need to handle manually, what’s the best way to preserve the scroll position during the reload?
I’ve created a minimal example to showcase the issue, which you can find here:

https://live.datatables.net/tiqisatu/9/

Thanks in advance for any suggestions or solutions!

dtkra

do you have any idea on how to handle this?

thanks

dtkra

I've tried to store the scroll position before the dt.reload and reassign it in the dt.reload callback but the effect is that it bounces from the beginning to the scroll position.
Anyone had success in handling this?

thanks

allan

  dt.on('preXhr', function () {
    let scrollTop = $(window).scrollTop();

    dt.one('draw', function () {
      $(window).scrollTop(scrollTop);
    });
  });

https://live.datatables.net/tiqisatu/14/edit

There is a little period while the JSON is being loaded that if the user is scrolling the document, then it might jump them back to the wrong place. You could perhaps add a scroll listener to check if that happens and set a flag to not set the scrollTop in such a case.

Allan

dtkra

i narrowed down the problem:

if the table size change and grow bigger than your browser window after the page loaded the scroll problem occurs.

if you instead keep the browser window small so that when you load the page the table is already bigger than your window then this scroll problem doesn't occur.

you can try in the provided example with a small browser window, reload the page, when ajax.reload occurs there is not such an issue.

i think this is somehow related to this:
https://datatables.net/forums/discussion/74201/scroll-problem

allan

I'm not clear if you saw my previous reply?