Scrolling a table that is refreshed via polling

GregP

My application continuously polls for data, and re-draws using ajax.reload()

I have scrollY set to 220px, scrollCollapse set to false and paging set to false.

Let's say my data set contains 30 entries. Based on my other settings and CSS, 220px of height on the table shows about 10 of the available entries. So, I grab onto the scrollbar to scroll down looking through the other 20.

At this point, the data comes back, and the table is reloaded. This causes the scrollbar "handle" to be... reset? along with it. You continue to drag the cursor, but the handle stays where it is, grayed out. DataTables or the rendering engine (not sure which) seem to be aware that the viewport was in an interactive state and no new data is drawn. This is fine-- I don't need or even want new data while scrolling; just mentioning it to be thorough. Releasing mouse-click makes the handle re-available and new data is drawn. To scroll through the entire data set, the user will have to continually release, re-click, drag a bit, release, re-click, drag a bit, over and over. Obviously that's not going to fly.

I propose capturing click on the scrollbar (there must be an event in JavaScript?), cancelling any outstanding XHR, and pausing polling. On release, XHR is fired and polling resumes.

However, the problem is that during the round-trip of the XHR, there are still X milliseconds in which the scrollbar is made unavailable for click, so the user still has plenty of opportunities to try clicking and dragging the handle, only to discover they're not dragging anything.

Any insights, solutions, or options that I may have missed?

Thanks!

allan

This is being caused by the fact that ajax.reload() will first call clear() and then rows.add() - i.e. the rows shown after the refresh are entirely new. Thus there is a brief moment when the table has no rows and thus scrolling is reset.

It would be possible to listen for preXhr to get the scrollTop of the scrolling container, and then at the next draw set the scrolling to that value.

This is possibly something that DataTables should do itself. I've take a note to look into it in future.

Thanks,
Allan

GregP

Thanks, Allan! When I re-read my own question, I saw that the "I propose" sounds like making it part of DT; I meant that I propose doing it myself at my application level.

However, if it's a part of DT and it works, I wouldn't argue with that, either. ;-) Thanks for the hint about preXhr, I'll look into that.

One thing I wasn't sure about in the answer, though-- the hint points towards using scrolltop. The scrolling position actually isn't getting lost. The browser itself probably does some magic to remember the scrolling position. Maybe. The problem is that the cursor stops "holding on" to the handle and it takes a new click to grab it again.

GregP

Haha, as it turns out, my colleague has already implemented a scrollTop method to track the position, so that's why the position is staying where it is. No magic, just the work was already done and I didn't notice. ;-)

But with the handle getting lost, we're still out of luck. Thanks, though!