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>