Instant Loading Indicator Display Feature Request and Proposed Code

khirakawa

Hi,

We are currently using Scroller with server-side processing.

Scroller will only fetch data when 1) the scroll position is outside the redraw range and 2) when scrolling stops. This means, a server request will not get triggered until the user has stopped scrolling. Depending on the user, that could take a good 2 to 5 seconds if the user is scrolling down a really large data set.

Ideally, a loading indicator would be shown the moment the scrolling position is out of the redraw range. i.e. when "white space" is shown.
However, the current implementation of Scroller does not allow for such a behavior.

The feature request is to add a callback handler inside the if statement that determines the user has scrolled outside the redraw range. A custom callback to display the loading indicator can be passed into this callback.

Here is how we implemented this feature.

First, we fixed Scroller's premature redraw bug:
http://datatables.net/forums/discussion/9026/datatables-scroller-plugin-white-space-at-top-issue-and-fix-provided#Item_1

Then we added a optional callback
[code]

... other options in this.s

/**
* setTimeout reference for the redraw, used when server-side processing is enabled in the
* DataTables in order to prevent DoSing the server
* @type int
* @default null
*/
"drawTO": null,

/**
* see http://datatables.net/forums/discussion/9026/datatables-scroller-plugin-white-space-at-top-issue-and-fix-provided#Item_1
*/
"scrollStartedOutsideRedrawBoundary" : false,

/**
* Scroller will only start fetching data when 1) scroll position is outside the redraw range and
* 2) when scrolling stops. This means, a server request will not trigger until the user has stopped scrolling.
* That could take a good 2 to 5 seconds. We need to have a way to show the loading indicator
* when the scroll position is outside the range (white space shown). We can't wait till the server request is triggered.
* Therefore, Scroller needed to be patched to call a callback that allows for such a behavior.
*/
"fnScrollStartedOutsideRedrawBoundaryCallback" : function(){ }

}, Scroller.oDefaults, oOpts );

[/code]

Then before clearTimeout(this.s.drawTO) inside _fnScroll():

[code]

... some other code...

/* Do the DataTables redraw based on the calculated start point - note that when
* using server-side processing we introduce a small delay to not DoS the server...
*/
if ( this.s.dt.oFeatures.bServerSide ) {

// if scroll started outside redraw boundary, then set var to true and call callback
if(!this.s.scrollStartedOutsideRedrawBoundary){
this.s.fnScrollStartedOutsideRedrawBoundaryCallback();
this.s.scrollStartedOutsideRedrawBoundary = true;
}


clearTimeout( this.s.drawTO );
... server side fetch ...
[/code]

Thanks a bunch,

Ken

khirakawa

I just realized there's a cleaner way of doing this.

Instead of having a custom callback, just call fnProcessingDisplay.

So, instead of

[code]
// if scroll started outside redraw boundary, then set var to true and call callback
if(!this.s.scrollStartedOutsideRedrawBoundary){
this.s.fnScrollStartedOutsideRedrawBoundaryCallback();
this.s.scrollStartedOutsideRedrawBoundary = true;
}
[/code]

It would be


[code]
// if scroll started outside redraw boundary, then set var to true and call callback
if(!this.s.scrollStartedOutsideRedrawBoundary){
this.s.dt.oApi._fnProcessingDisplay(this.s.dt, true)
this.s.scrollStartedOutsideRedrawBoundary = true;
}
[/code]

allan

Sounds like a very good plan - like it!

I'll look at implementing this shortly.

Allan