Adding rows and keep scroller position

Adding rows and keep scroller position

beginner_beginner_ Posts: 55Questions: 2Answers: 0
edited November 2011 in General
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)

Replies

  • beginner_beginner_ Posts: 55Questions: 2Answers: 0
    edited November 2011
    I found this function:

    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]
  • allanallan Posts: 63,535Questions: 1Answers: 10,475 Site admin
    The plug-in function should work okay, how are you calling it? Having said that, I've never used it with Scroller so I'm not sure that it will work as intended (but it certainly shouldn't throw an error).

    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
  • beginner_beginner_ Posts: 55Questions: 2Answers: 0
    edited November 2011
    Hi 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.
This discussion has been closed.