jQuery 在桌子上无限滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11688279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery infinite scroll on a table?
提问by thatuxguy
Does any one know of a good tutorial, or jQuery plugin i can use to add infinite scroll onto my table?
有没有人知道一个好的教程，或者我可以用 jQuery 插件在我的桌子上添加无限滚动？
I basically want to add more rows to the table as a user scrolls down the page.
我基本上想在用户向下滚动页面时向表中添加更多行。
Thanks in advance.
提前致谢。
采纳答案by GOK
Just try this out:
试试这个：
HTML:
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:
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>
回答by Nikola
You can take a look at this if it suits your needs: http://datatables.net/examples/basic_init/scroll_y_infinite.html
如果它适合您的需要，您可以看看这个：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:
即使您不熟悉数据表，也可能会吸引您使用它，至于在表上实现这种无限滚动，您只需添加以下 jQuery 代码：
$(document).ready(function() {
$('#example').dataTable( {
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "200px"
} );
} );
to the populated table in the html (They have 4 waysto do that).
到 html 中的填充表（他们有4 种方法可以做到这一点）。
Anyay, IMO, worth checking out.
Anyay，IMO，值得一试。
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
编辑：正如@SpoiledTechie.com 在下面的评论中所说 - 此信息已过时，您应该查看他们现在支持的方式：http: //datatables.net/upgrade/1.10#bScrollInfinite
回答by Nilesh Thakkar
You might want to check out following links:
您可能想查看以下链接：
http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/#.UBKSdHWi6so
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://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/
http://wp.tutsplus.com/tutorials/theme-development/how-to-create-infinite-scroll-pagination/
I hope this helps!
我希望这有帮助！
回答by joshb
These are two of my favorite jquery plugins for infinite scroll. Both have good examples of how to use them.
这是我最喜欢的两个用于无限滚动的 jquery 插件。两者都有很好的例子来说明如何使用它们。
https://github.com/msjolund/jquery-esn-autobrowse
https://github.com/msjolund/jquery-esn-autobrowse
