Reloading the table makes the page jump to the top.

tlawrence

I've been wrestling on my own trying to make this work seamlessly but god dammnit is it hard. :P

I have a page with a few datatables on it that need to be manually refreshable. I found your 'fnReloadAjax' plugin. I wired up the call to do the refreshing. When I try to refresh, I totally lose the current scrollTop position.

Now, I had previously added some draw callbacks to add in spacing to the table to emulate fixed height tables. When paginating, the screen would also jump to the top - I fixed this by tracking the starting scrollTop in the pre-draw callback, and reapplying it in the draw callback after I added in my spacer row to keep the fixed height. This worked virtually seamless - you wouldn't know what happened with just your eyes.

This method, however, does not work with the 'fnReloadAjax' method. It seems to jump to the top of the page, then stagger for a second as it reloads or redraws or whatever, then finally hits the draw callback and jumps back down to the last scrollTop position.

How can I actually stop dataTables from jumping to the top?

fbas

I think the plug-in API function fnStandingRedraw will work with AJAX sourced tables
http://datatables.net/plug-ins/api

[code]
/* add this to your javascript to add this function to the datatable object */

$.fn.dataTableExt.oApi.fnStandingRedraw = function(oSettings) {
//redraw to account for filtering and sorting
// concept here is that (for client side) there is a row got inserted at the end (for an add)
// or when a record was modified it could be in the middle of the table
// that is probably not supposed to be there - due to filtering / sorting
// so we need to re process filtering and sorting
// BUT - if it is server side - then this should be handled by the server - so skip this step
if(oSettings.oFeatures.bServerSide === false){
var before = oSettings._iDisplayStart;
oSettings.oApi._fnReDraw(oSettings);
//iDisplayStart has been reset to zero - so lets change it back
oSettings._iDisplayStart = before;
oSettings.oApi._fnCalculateEnd(oSettings);
}

//draw the 'current' page
oSettings.oApi._fnDraw(oSettings);
};
[/code]

[code]
/* Example call */
$(document).ready(function() {
var oTable = $('.dataTable').dataTable()
oTable.fnStandingRedraw();
} );
[/code]

tlawrence

The refresh should actually go back to the server and try and reload the data, which this standing redraw method would not accomplish.

The use case is that there might be some dynamically updating items which, if you constantly refreshed, you'd see changing all the time. I want to have a timer to refresh the table every X seconds so users get the constantly updated view of the data.

The refresh behavior has to meet a few criteria, though:
- it's a standing redraw; going back to pg 1 of the pagination isn't an option if the number of items doesn't actually change
- it shouldn't make the page scroll up and down

The problem seems to be that either pagination gets reset Or the page scrolls to the top. The pagination thing I can sort of understand but I'm a bit unclear on how the plugin doesn't reapply the proper scrollTop. It seems odd to expect that users are OK with the screen jumping up and never coming back.

Like I said before, I coped with a similar situation where adding a filler row made the page jump, and I solved it by tracking/reapplying the scrollTop... the various redraw and AJAX reload methods, though, seem to invoke multiple draw calls where my predraw/call callbacks will get called in such a way that scrollTop is always reset to 0 and thus cannot be properly reapplied.

It seems crazy that the version of ExtJS Grids that I replaced with jQuery/DataTables could do this without any sort of plugins or anything... and it was quite old. :/