Infinite scrolling

Infinite scrolling

janiscmbpjaniscmbp Posts: 6Questions: 0Answers: 0
edited January 2011 in General
Hi, My first post here, so I just must thank Allan publicly for his great work with DataTables and documentation and all. Amazing.

I was thrilled to find out about infinite scrolling. We have thousands of rows to show, and pagination isn't really great for that. The idea, that when you hit the bottom row, next set is automatically loaded, is intuitive. Now, I have set page size to 100. I can not really think use case for needing to see more than that, with working search and multiple column sorting. Never the less, my user might want that.

My first thought was to make drop-down element to dynamically change default page size. This ads some clutter, however, and for most users this feature would not be needed anyway. It occured to me, wouldn't it be nice, if one could set infine scrolling page size to "increasing" or whatever, so that DT first load 100 rows (default), when you hit the bottom, another 100, then 200 (now showing 400), then 400 (now showing 800) etc. There should be a limit to this, as getting 10,000 is out of the question I suppose.

BR.
Jani

Replies

  • janiscmbpjaniscmbp Posts: 6Questions: 0Answers: 0
    I ended up using built-in lenght menu, commenting out or removing if-clause from following does this.
    [code]
    function _fnFeatureHtmlLength ( oSettings )
    {
    if ( oSettings.oScroll.bInfinite )
    {
    return null;
    }
    [/code]
  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin
    Hah - yes that would be cool. Nice idea. It can probably be done by manipulating the display length request in fnServerData. It will require the reading of internal variables (in oSettings) but I think that could work.

    10'000 rows probably is a bit too much though - I think it would bring most browsers to their knees to process and render than much information.

    Allan
  • di4bl0sdi4bl0s Posts: 17Questions: 0Answers: 0
    edited July 2011
    Hi Allen,

    This fix to the above _fnFeatureHtmlLength method allows the selector to be available for infinite paging. It corrects the iDisplayStart to prepare it for the _fnPageChange method and then sets the new _iDisplayLength without redrawing the table so that the scolling can just take place as usual but with the newly set length
    its mainly the $('select', nLength).bind that changed and the part as mentioned above that was removed to allow the selector to appear.
    feel free to improve

    regards Jan.

    [code]
    /*
    * Function: _fnFeatureHtmlLength
    * Purpose: Generate the node required for user display length changing
    * Returns: node
    * Inputs: object:oSettings - dataTables settings object
    */
    function _fnFeatureHtmlLength ( oSettings )
    {

    /* This can be overruled by not using the _MENU_ var/macro in the language variable */
    var sName = (oSettings.sTableId === "") ? "" : 'name="'+oSettings.sTableId+'_length"';
    var sStdMenu = '';
    var i, iLen;

    if ( oSettings.aLengthMenu.length == 2 && typeof oSettings.aLengthMenu[0] == 'object' &&
    typeof oSettings.aLengthMenu[1] == 'object' )
    {
    for ( i=0, iLen=oSettings.aLengthMenu[0].length ; i
This discussion has been closed.