Add next page records on scrollinfinite table without redraw

Add next page records on scrollinfinite table without redraw

AzaretAzaret Posts: 17Questions: 2Answers: 0
edited August 2013 in DataTables 1.9
Hi,

To set the context, I use datatable on some widgets pages, because of that, my tables have an absolute position to the parent widget. At some point I enabled the infinite scroll because it offers a better user experience.

As the scroll infinite doesn't work well in absolute position (well not in my configuration at least), I had to make a custom trigger on scroll reaching the end on the table container :

[code]
$("#table").parent().scroll(function () {
if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
var s = oTable.fnSettings();
if (s._iDisplayLength < s._iRecordsTotal) {
s._iDisplayLength = s._iDisplayLength + 5;
$('#table .see-more').addClass('load');
oTable.fnDraw();
} else {
$("#table").addClass('done');
}
}
});
[/code]

So far it's working well, tho it's not the ideal thing to do.

But, let's continue to reach my question : In scroll infinite mode, the headers are totally broke due to absolute position. Trying to find the best workaround about this header issue, instead of JS setting width for any hypothetical resize (widgets are resizable and movable) and others issues, I choose the option to get ride of headers. Finally, as the data is less understandable without them, I changed the design for something less table-ish. An example of those design here : http://d.pr/i/XQpZ

But there is my issue; fnDraw redraw the whole table, which means that if the user opened some details of some table element, it will be closed at the draw, and this can be annoying for the user, more that it cause the scroll position to change too. I read in some posts that I can use AddData to push lines without drawing the table again, but I'm wondering the fact that, as my data is server side, if I use AddData, I'll have to use some ajax to get them. In that case it would make datatable pretty useless.

But I want to keep datatable for all the JS work it does well like sorting, searching, etc... so I wonder if there is a way to ask datatable to load and add the next page without redraw everything.

Thanks for the help, and if I missed some answer about that on the forum or google, please forgive me I might have not seen it.

Replies

  • allanallan Posts: 63,133Questions: 1Answers: 10,399 Site admin
    Currently no - sorry. Infinite scrolling is effectively deprecated because of issues such as this which are quite significant. I'd recommend not using infinite scrolling it at all possible.

    Allan
This discussion has been closed.