【发布时间】：2014-11-11 14:06:02
【问题描述】：
有没有人知道一个很好的教程或 jQuery 插件，我可以用它来在我的桌子上添加无限滚动？
我基本上想在用户向下滚动页面时向表中添加更多行。
提前致谢。
【问题讨论】：
标签： jquery
【发布时间】：2014-11-11 14:06:02
【问题描述】：
试试这个：
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>
【讨论】：
-
应该提到我正在使用 .NET 哈哈 :) 谢谢
-
如果在 chrome 上 100% 页面缩放，这可以正常工作。但如果不是 100% 页面缩放，则无法正常工作。
如果适合你的需要，你可以看看这个：http://datatables.net/examples/basic_init/scroll_y_infinite.html
即使你不熟悉数据表，它也可能会引起你的兴趣，至于在表上实现无限滚动你只需要添加这个 jQuery 代码：
$(document).ready(function() {
$('#example').dataTable( {
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "200px"
} );
} );
到 html 中的填充表（他们有 4 ways 来做这件事）。
无论如何，IMO，值得一试。
编辑：正如@SpoiledTechie.com 在下面的评论中所说 - 此信息已过时，您应该查看他们现在支持的方式：http://datatables.net/upgrade/1.10#bScrollInfinite
【讨论】：
-
看起来不错，不是想在表格中添加一个 scoll 栏，主要使用浏览器窗口上的那个，有点像我猜的 FB 使用
-
在这种情况下，我认为这实际上可能不适合您。我想你想要这样的东西，因为你在标题中加上了“table”。
-
虽然看起来不错，但将来可能会使用它。所以谢谢你指导我:)
-
@thatuxguy：当然，没问题，很高兴我提供了帮助。
-
此评论已过时。
这是我最喜欢的两个用于无限滚动的 jquery 插件。两者都有很好的例子来说明如何使用它们。
【讨论】：