After updating DataTables to 1.10, bScrollInfinite was replaced by new extension Scroller. Problem is that Scroller is working with virtual scrollbar within table's div. I want to create simple (I know, infinite scroller has lot of troubles) infinite scroll by MAIN BROWSER scrollbar.
Currently, I've something like that:
var dataTable = $('#data-table').DataTable({
serverSide: true,
pageLength: 100,
searching: true,
fixedHeader: {
header: true,
headerOffset: 50
},
ajax: {
url: '/url',
method: 'POST'
},
columns: [ 'col1', 'col2' ],
});
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
console.log("bottom!");
dataTable.page('next').draw('page');
}
});
This works fine but it replaces existing rows by new rows (from new page). I've experimented with success callback of Ajax call and rows().add(...).draw() method but after firing draw(), I got infinite loop (because draw calls Ajax) and not infinite scroll :(
Basically, I need to add new rows to end of the table instead of replacing existing rows.
Btw, similar question was posted to DataTables forum but without helpful answer.
table.datatable({
iDisplayLength: 25,
serverSide: true,
ordering: false,
searching: false,
sAjaxSource: //url here,
scrollY: 1014 //can be any value,
scroller: {
loadingIndicator: true
}
}
This is will work but one thing you should keep in mind to INCLUDE THE SCROLLER PLUGIN. It is not a part of jquery.datatables.js
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With