jquery - jQuery在桌子上无限滚动？

Question

有谁知道一个好的教程，或者我可以用来在我的桌子上添加无限滚动的 jQuery 插件？

我基本上想在用户向下滚动页面时向表中添加更多行。

提前致谢。

score 5 · Accepted Answer

试试这个：

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>

score 4 · Accepted Answer

如果它适合您的需要，您可以查看它：http: //datatables.net/examples/basic_init/scroll_y_infinite.html

即使您不熟悉数据表，它也可能会吸引您使用它，至于要在表上实现无限滚动，您只需添加以下 jQuery 代码：

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

到 html 中的填充表（他们有4 种方法可以做到这一点）。

Anyay，IMO，值得一试。

编辑：正如@SpoiledTechie.com 在下面的评论中所说 - 此信息已过时，您应该查看他们现在支持的方式：http: //datatables.net/upgrade/1.10#bScrollInfinite