jQuery infinite scroll on a table? [closed]

Question

Does any one know of a good tutorial, or jQuery plugin i can use to add infinite scroll onto my table?

I basically want to add more rows to the table as a user scrolls down the page.

Thanks in advance.

Answer 1

Just try this out:

HTML:

 <div id="postswrapper">
       <div class="item">content</div>
       ...
       <div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif" /></center></div>
    </div>

Javascript:

<script type="text/javascript">
$(window).scroll(function()
{
    if($(window).scrollTop() == $(document).height() - $(window).height())
    {
        $('div#loadmoreajaxloader').show();
        $.ajax({
        url: "loadmore.php",
        success: function(html)
        {
            if(html)
            {
                $("#postswrapper").append(html);
                $('div#loadmoreajaxloader').hide();
            }else
            {
                $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
            }
        }
        });
    }
});
</script>

Answer 2

You can take a look at this if it suits your needs: http://datatables.net/examples/basic_init/scroll_y_infinite.html

Even if you're not familiar with datatables, it may intrigue you to use it, as for to implement this infinite scroll on a table you just have to add this jQuery code:

$(document).ready(function() {  
    $('#example').dataTable( {  
    "bScrollInfinite": true,
    "bScrollCollapse": true,
    "sScrollY": "200px"
    } );
} );

to the populated table in the html (They have 4 ways to do that).

Anyay, IMO, worth checking out.

edit: As @SpoiledTechie.com says below in the comment - this info is outdate and you should look into the way they support that now: http://datatables.net/upgrade/1.10#bScrollInfinite

Answer 3

You might want to check out following links:

http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/#.UBKSdHWi6so

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-infinite-scroll-web-gallery/

http://wp.tutsplus.com/tutorials/theme-development/how-to-create-infinite-scroll-pagination/

I hope this helps!