Issue with Scroller
Issue with Scroller
Problem: All rows are not rendered when scrolling through a large table (2000+ rows). Only the number of rows approximately equal to the displayBuffer option are rendered and the rest of the rows are blank.
Here are the relative initialization options I'm using for the dataTable:
deferRender: true,
scroller: {
displayBuffer: 100
},
scrollY: 440,
scrollCollapse: true,
When I scroll to the area where the rows are blank and execute this...
table.draw(false)
...the blank rows are rendered and I can scroll through the rest of the table without a problem.
The ajax initialization option is assigned a function, which only loads the data when table.ajax.reload() is called...the initial rendering of the table is always done with an empty data array passed to the callback function:
ajax: function (data, callback, settings) {
if (reload) {
reload = false;
$.ajax("rest/summaryData", {
method: "post",
contentType: "application/json",
data: data,
success: function(data, textStatus, jqXHR) {
callback({data: data});
}
});
} else {
callback({data: []});
}
},
After $.ajax(...) executes only the first 100 rows are rendered. I've tried setting the scroll parameter to true, so is uses the defaults and only the first 9 rows (the default for displayBuffer) will render and the rest of the table is blank. This happens in both IE 11 and Firefox 53.
Any help would be appreciated...