Scroller Extension - Client-side data source with debounce scroll event

tpraj

Hi,

Thank you for making this awesome library. I have a question:

In the scroller extension with server-side processing example:
https://datatables.net/extensions/scroller/examples/initialisation/server-side_processing.html

When the user drags the scrollbar handle violently (moving it up or down inside the scrollbar track), the table shows the loading indicator until the user stops moving the scrollbar and only then does it display the data. This allows for a very smooth scrolling experience. I believe what is done here is debouncing, whereby the table waits until there's no more scrolling activity, waits for a brief period, then begins to render the page.

I've implemented a client-side data source with the scroller extension:

{ 
   scroller: { loadingIndicator: true }, 
   deferRender: true,
   paging: true,
   processing: true,
   ... other datatable options...
}

And realized the debouncing mechanism isn't performed when I drag the scroll handle violently.

My question is:
Is it possible to have debounced scrolling with a client-side data source using the scroller extension?

I found previous discussions around this topic:

1. What is SlickGrid doing differently to make its virtual scrolling so smooth?
   https://datatables.net/forums/discussion/comment/36575/#Comment_36575

2. DataTables Scroller, Debouncing Scroll Events and requestAnimationFrame
   https://datatables.net//forums/discussion/comment/37756/#Comment_37756

In the 2nd discussion, I believe you mentioned debouncing the scroll event regardless of the data-source (server-side or client-side) would be a good idea. Is there any update on this?

I understand you have an infinitely long list of new features/requirements to add into the library, I don't mind hacking the internals of the library, if you could show me where I could find the debouncing scroll event on the server side code and also roughly where in the scroller extension client-side code does it start drawing to the dom the new elements , that would be awesome!

Thanks for everything,
Thanesh

allan

You are absolutely correct - it is using a debounce. This is where it is doing it.

Currently no, there isn't a built in way of doing that with client-side processing, but what you could do is modify that bit of code so it will check to see if the this.s.serverWait property is set or not. If not then it doesn't debounce. If it is, then the setTimeout option should run.

Allan

tpraj

thank you, I'll commence with the hacking

tpraj

I got it to work (for my use-case), for anyone else interested, here's what I did.

Go to the Scroller debounce code

Original Code:

if ( this.s.dt.oFeatures.bServerSide ) {
    clearTimeout( this.s.drawTO );
    this.s.drawTO = setTimeout( draw, this.s.serverWait );
}
else {
    draw();
}

Modified Code:

// if ( this.s.dt.oFeatures.bServerSide ) {
    clearTimeout( this.s.drawTO );
    this.s.drawTO = setTimeout( draw, this.s.serverWait );
// }
// else {
//  draw();
// }

Cheers,
Thanesh

allan

Superb - thanks for sharing that with us!

Allan