How to maintain jQuery DataTables scroll position after .draw()
Just wanted to add this here though it's a slightly different scenario - It worked for my case and will likely be useful to some others who arrive here looking for answers.
I'm using server side processing and doing a refresh of table data once every 10 seconds with table.ajax.reload()
. This function does accept an argument to maintain current paging value but fails to keep scroll position. The solution was very similar to the one the OP mentioned and sets the scroll position on the callback. Not sure why it didn't work for him but here's the interval code I'm using with success:
setInterval( function () {
scrollPos = $(".dataTables_scrollBody").scrollTop();
myTable.ajax.reload(function() {
$(".dataTables_scrollBody").scrollTop(scrollPos);
},false);
}, 10000 );
The way I solved it with DataTables 1.10 is to use preDrawCallBack to save the ScrollTop position and then DrawCallback to set it.
var pageScrollPos = 0;
var table = $('#example').DataTable({
"preDrawCallback": function (settings) {
pageScrollPos = $('body').scrollTop();
},
"drawCallback": function (settings) {
$('body').scrollTop(pageScrollPos);
}
});
var table = $('table#example').DataTable({
"preDrawCallback": function (settings) {
pageScrollPos = $('div.dataTables_scrollBody').scrollTop();
},
"drawCallback": function (settings) {
$('div.dataTables_scrollBody').scrollTop(pageScrollPos);
}
});
This appears to work for me. I just had to find the div.dataTables_scrollBody
after the table was drawn.
If you pass the draw function the page
parameter, the table will not shift in scrolling, but it will re-read from the .DataTable
source. E.g. after "saving" data that updates the DataTable:
$("your-selector").DataTable().row(t_itemid).invalidate();
$("your-selector").DataTable().row(t_itemid).draw('page');
Note: I am making use of an id
column in my DataTable instantiation which makes it easy to work directly with a single row. But I believe the page
parameter will give the desired result.