I have the code below, everything pretty much works, but the issue I'm running into:
When I get to record 25 in the scroll the AJAX call is executed again, causing the table to refresh. Currently it returns 87 records, which means 26-87 is never displayed.
The back end returns all the data when called, as such I can't page, nor can I handle lazy loading at record 26. How do I get the datatable to display/scroll through all 87 rows before executing the AJAX call?
var recentPlatformTable;
var api;
var curRow = 0;
var timer;
$(document).ready(function () {
recentPlatformTable = $('#recentPlatformTable').dataTable({
lengthChange: false,
iDisplayLength: -1,
serverSide: true,
ajax: {
url: "/account/GetRecentPlatformBookings",
contentType: 'application/json; charset=utf-8',
type: "POST",
data: function (data) {
curRow = 0;
setTimer();
return data = JSON.stringify(data);
},
},
processing: true,
paging: true,
searching: false,
sorting: false,
"scrollY": "170px",
"scrollCollapse": false,
"ordering": false,
deferRender: false,
columns: [
{ "data": "ID" },
{
"data": "HotelName",
render: function (data, type, row) {
return '<div style="white-space: nowrap; overflow:hidden; text-overflow:ellipsis;width:100px;">' + data + '</div>';
}
},
{
"data": "HotelCity",
render: function (data, type, row) {
return '<div style="white-space: nowrap; overflow:hidden; text-overflow:ellipsis;width:100px;">' + data + '</div>';
}
},
{ "data": "HotelState" },
{ "data": "ReservationTotal" },
{ "data": "CustomerSavings" },
{ "data": "GrossProfit" },
{ "data": "EstimatedMatrixPayout" },
{ "data": "EstimatedTACPPayout" },
{ "data": "EstimatedCompanyShare" }
],
responsive: false,
info: false,
scroller: true,
"footerCallback": function (row, data, start, end, display) {
api = this.api();
},
});
$('.dataTables_paginate').hide();
$('.dataTables_scrollFoot').hide();
$('.dataTables_scrollBody').css('overflow', 'hidden');
});
function setTimer() {
if (timer) {
clearInterval(timer);
}
timer = setInterval(function () {
if (api === undefined)
return;
var num_rows = api.page.info().recordsTotal;
curRow += 1;
console.log("*****row " + curRow + " of " + num_rows);
if (curRow > num_rows) {
console.log("*****Reloading");
clearInterval(timer);
recentPlatformTable.DataTable().ajax.reload();
}
else {
api.settings().scroller().scrollToRow(curRow, 1000);
console.log(api.rows({ page: 'current' }).data());
}
}, 1000);
}