Adding rows and keep scroller position
Adding rows and keep scroller position
Hi all,
I'm adding rows to a datatable as they trickle in from a search that can take a long time. The idea is that the user can already look at the first hits while search continues in background hence "hiding" the long search time.
The issue I have is that when using scrolling ("iDisplayLength": -1, "sScrollY": "600") for each set of rows added the scroller jumps back up to the top. When using paging it jumps back to page 1.
How can i prevent this behavior, meaning keep the scroll position? (redraw = false of course won't show new hits hence not an option)
I'm adding rows to a datatable as they trickle in from a search that can take a long time. The idea is that the user can already look at the first hits while search continues in background hence "hiding" the long search time.
The issue I have is that when using scrolling ("iDisplayLength": -1, "sScrollY": "600") for each set of rows added the scroller jumps back up to the top. When using paging it jumps back to page 1.
How can i prevent this behavior, meaning keep the scroll position? (redraw = false of course won't show new hits hence not an option)
This discussion has been closed.
Replies
http://datatables.net/plug-ins/api#fnStandingRedraw
However I get a "oSettings is null error" when calling it.
Any ideas?
EDIT:
[code]
$(document).ready(function() {
resultsTable = $('#result').dataTable( {
"bDeferRender": true,
"bProcessing": true,
"iDisplayLength": -1,
"aLengthMenu": [[5, -1], [5, "All"]],
"sScrollY": "600",
"bSort": false,
"aoColumns": [
{"bSearchable": true,
"bSortable": true,
"sWidth": "50px"},
{"bSearchable": false,
"bSortable": false,
"sWidth": "510px"}
]
} );
getAndAddRows();
startTimer();
} );
function startTimer() {
myTimer = window.setInterval( function() {
getAndAddRows();
}, 3000);
};
function stopTimer(){
window.clearInterval(myTimer);
}
function getAndAddRows(){
$.get(
'getSearchHits',
function(data){
if(data[0] == 'searchCompleted'){
stopTimer();
$('#status').text('Search Completed');
return;
}
$('#result').dataTable().fnAddData(data, false);
resultsTable.fnStandingRedraw();
$('#hitsFound').text('Hits Found: '
+ resultsTable.fnSettings().fnRecordsTotal());
},
"json"
);
}
[/code]
The reason that DataTables jumps back to the start is because the new data causes a resort and refilter of the table - thus in order to avoid a confusing jump of data (possibly) it will always jump back to the start. This does come up every now and then, so I'll look at adding an option in to control this in future (but can't right now as I'm making a couple of other big changes, so I'll keep that separate for the moment).
Until then, what I think you will need to do is use Scrollers API methods (http://datatables.net/docs/Scroller/1.0.1/) and a little bit of jQuery to get the scrolling position just before you do the data add, and then use the API to scroll to that row.
Allan
sorry was a bit unspecific. I don't use scroller, just the "built-in" scrolling.
EDIT:
Oh my god. Stupid mistake. I also pasted the usage example of the function into the script file which lead then lead the error...
The function works but only with paging. Scroller position is lost. i might try scroller but in the past had troubles with it due to my rows taking up more space than a default row.
EDIT2:
Ok I will go with paging and remove the display all option. That also gives the full advantage of "bDeferRender": true, which in my case ( dynamically generated images) is very useful.
Good enough for me. Hence issue resolved.