Scroller - problems with server-side Ajax params

ronB

Hello,

I am trying to use DataTables and Scroller in an ASP MVC web app. My basic understanding of the process is that the table is initially rendered in the browser empty. An initial Ajax call populates it with rows directed by the iDisplayLength variable, and it is progressively fed rows from the Ajax call as the user scrolls down the table. It is the server-side processing that must feed the table the appropriate batch of records upon each call based on where the table says it is scrolling, using the iDisplayStart variable.

I have had a problem trying to dynamically append records to the DataTable, using Scroller, based on the input variables (iDisplayLength and iDisplayStart) offered by the JQueryDataTableParam object, and the output variables (iTotalRecords and iTotalDisplayRecords) in the JSON data.

The initial load of the table and its periodic appending of rows determined by scrolling the table in the browser works for a couple feeds, however, there is some basic confusion about which data to send it from the server using the Ajax feed. The iDisplayLength variable always has 189 as a value, that's ok. The iDisplayStart variable has 0 for the first call, 1 for the second, and 184 for the third call. Each handling of the Ajax call was the result of a slow downward scrolling in the browser. Only about 1/3 of the total data has been sent to the browser at this point, but DataTables will not produce any further trigger to the Ajax call, until I scroll up to the top of the table. But the table has retained all of the earlier rows and would not need to refresh any earlier rows.

I have read the documentation for the values to send along in the JSON return data - iTotalRecords and iTotalDisplayRecords. The above results were obtained while assigning the returned record count for both variables, the 189 used from the count of the record set that was returned, which is also the value in the input variable, iDisplayLength. I have insured that no row's data wraps - all rows are single height.

I have these questions:

Is my basic understanding of how DataTables using Scroller is populated?
Does adding Scroller to DataTables change how the input variables iDisplayLength and iDisplayStart are used?
Does adding SCroller to DataTables change how the return variables iTotalRecords and iTotalDisplayRecords are set?
Should iDisplayStart change its values so dramatically during a standard downward scrolling of the DataTable in the browser?

I ran this web app with DataTables debugger and the code is: "anubeg"

Thanks much in advance for any analysis or clarification:
- ronB

I don't know how to effectively replicate a server-side Scroller problem in DataTables Live, or jsFiddle so here is a list of the setup for DataTables and Scroller in my app page:

The DataTables version is 1.9.3
The Scroller version is 1.1.0 (also tried 1.1.1 nightly as of Nov. 14, 2012)











var oTable = $('#targetqueue').dataTable(
{
"sDom": 'RC<"clear">lfrtipS',
"bServerSide": true,
"sAjaxSource": 'GetQueueList/12-20343',
"bProcessing": true,
"bPaginate": true,
"bAutoWidth": false,
"bScrollInfinite": true,
"bScrollCollapse": true,
"bLengthChange": false,
"bScrollAutoCss": true,
"sScrollY": "450px",
"bDeferRender": true,
"bSortCellsTop": true,
"oScroller": { "loadingIndicator": true },
"aoColumns": [
{ "mData": "GUID", "sWidth": "55px" },
{ "mData": "SlateID", "sWidth": "56px" },
{ "mData": "Site", "sWidth": "115px" },
{ "mData": "Description", "sWidth": "285px" },
{ "mData": "Technician", "sWidth": "78px" },
{ "mData": "Tier", "sWidth": "20px" },
{ "mData": "State", "sWidth": "80px" },
{ "mData": "WorkState", "sWidth": "78px" },
{ "mData": "Severity", "sWidth": "52px" },
{ "mData": "Group", "sWidth": "72px" },
{ "mData": "AlarmCount", "sWidth": "15px" },
{ "mData": "DateReceived" }
],
"aaSorting": [[0, "desc"]],
"aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}],
"oLanguage": { "sSearch": "Filter all columns:" },
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr("class", aData["Severity"].toString().toLowerCase());
$(nRow).attr("id", aData["GUID"].toString());
$(nRow).find("td:first").text("");
$(nRow).find("td:first").append("" + aData["SlateID"] + "");
}
});
oTable.fnSetFilteringDelay(1100);
.
.
.