Problem with iDeferLoading and server side processing using infinite scroll

Calaus

I have a working implementation of DataTables using server side processing using an infinite scrolling mechanism to retrieve additional "pages" of data when you scroll to the bottom of the page. The current implementation doesn't return the table data in the initial call to the server. It draws an empty table and initialises it as a data table which kicks off the server call to retrieve the first page of content. Then I set a timer function that kicks off the next server call when the user scrolls down the page.

For various reasons, this needs to change so that the initial page of data is returned in the initial call. So I have changed it to set the iDeferLoading flag.

This is working to create the first page of data but has problems when I scroll to the bottom of the existing table. At this point my server call function gets called twice - once from my timer function and once from the DataTables. If I disable my timer function, the server call only gets fired once. So I can retrieve the second page but not the third or subsequent pages. If I enable the timer function and disable the infinite scroll flag on the table, I can retrieve each page but the draw replaces the contents of the table each time - rather than appending to the end.

I am including the flags and most of the callbacks from of my DataTables call. I am not including the contents of the server data call as it is fairly long and probably not important - it is a fairly standard ajax call. I am also not including the column defs for the same reason.

[code]
var tmpListTable = $('#searchResultsListTable').dataTable({
"iDeferLoading": totalRecords,
"bAutoWidth": false,
"bScrollInfinite": true,
"bScrollAutoCss": false,
"sScrollY": this.calculateTableHeight(),
"bScrollCollapse": true,
"bPaginate": false,
"bInfo": true,
"bFilter": false,
"bServerSide": true,
"iDisplayStart": 0,
"aaSorting": [[ 2, "asc" ]],
"fnDrawCallback": function () {
Gv.get('listViewController').hideLoaderElement();
styleEmptyTableElement();
Gv.get('listViewController').updateCurrentSavedTrack();
},
"fnInfoCallback": function (oSettings, iStart, iEnd, iMax, iTotal, sPre) {
totalRecords = iMax;
lastRetrievedRecord = iEnd;
gv.debug('fnInfoCallback, lastRetrievedRecord ' + lastRetrievedRecord);
Gv.get('listViewController').get('listViewModel').pageInfo.set('startIndex', iStart);
Gv.get('listViewController').get('listViewModel').pageInfo.set('endIndex', iEnd);
return '';
},
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
Gv.get('listViewController').get('listViewModel').pageInfo.set('totalItemNumber', iDisplayIndexFull + 1);
$(nRow).addClass('listtrackrow play');
return nRow;
},
"fnServerData": function (sSource, aoData, fnCallback) {
...
}
[/code]

So what I am looking for is either a way to disable the initial server call that is triggered by setting the bScrollInfinite flag or a way to ensure that this call gets triggered each time the user scrolls to retrieve additional pages.

Please let me know if you need further information. Thank you.