jQuery InfiniteScroll如何追加数据
jquery infinitescroll how to append data
我想写一个函数来做一件简单的事情。我有 10 页数据,每页有 20 条记录。当用户转到第一页底部并单击"加载更多"时,我想加载第二页的数据并将这些数据附加到第一页的显示数据中。
我找到了一个名为infinitescroll的jquery插件。它对我来说工作正常,除了我无法附加较新的数据。
我的网页:
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.infinitescroll.js"></script>
<script type="text/javascript">
$(document).ready(function () {
console.log({
{
$p - > getCurrentPage()
}
});
var $container = $('#masonny-div');
$container.infinitescroll({
loading: {
msg: null,
msgText: "<em>Loading the next set of posts...</em>",
speed: 'fast',
},
navSelector: "#next",
nextSelector: "#next a",
itemSelector: "#masonny-div",
});
});
</script>
</head>
<body>
<div id='masonny-div'>
@foreach ($p as $x)
<div class="item">{{$x -> name}}</div>
@endforeach
</div>
<br>
<div id="next">
<a href="{{$p->getUrl($p->getCurrentPage() + 1)}}">Next</a>
</div>
</body>
</html>
这是下一页的链接:$p->getUrl($p->getCurrentPage() + 1
每次单击它时,我都会获得下一页的数据,但是我如何将其附加到最后一页?
我试图调用回调函数,但这不起作用。控制台中没有消息。
var $container = $('#masonny-div');
$container.infinitescroll({
loading: {
msg: null,
msgText: "<em>Loading the next set of posts...</em>",
speed: 'fast',
},
navSelector: "#next",
nextSelector: "#next a",
itemSelector: "#masonny-div",
}, function(data){
console.log('I am here!');
console.log(data);
});
欢迎任何信息,谢谢。
您使用的是最新版本吗?
https://github.com/paulirish/infinite-scroll
我认为有一个新的选择:
appendCallback: true
当您使用最新版本时,请尝试以下操作:
- 设置
appendCallback:true
,@Greg已经建议 -
传递函数以完成选项:
finish:funciton(content){//do somethting}
。从文档:
在每次加载新内容的 AJAX 调用之后,在显示加载消息后,将调用完成的函数。如果未覆盖该选项,或者传递了 falsy 值,则默认操作将是淡出加载消息。
无限滚动的 #376 行.js源代码表明它传递了检索到的输出以附加到 DOM 中。
opts.loading.finished.call($(opts.contentSelector)[0],opts);
希望对:)有所帮助
您可以尝试使用不同的"itemSelector"。 类似的东西:
$container.infinitescroll({
loading: {
msg: null,
msgText: "<em>Loading the next set of posts...</em>",
speed: 'fast',
},
navSelector: "#next",
nextSelector: "#next a",
itemSelector: "#masonny-div div.item",
});
相关文章:
- jQuery动态使用.append()添加输入,但发布表单不是追加数据
- 从脚本后加载的处理程序追加数据
- 如何在单击事件中追加数据来自数据表
- jQuery InfiniteScroll如何追加数据
- D3 表根据不同的数据类型追加数据
- jQuery.移动子追加数据
- 使用纯 Javascript 在类中追加数据
- 单击时从 AJAX .each() 循环追加数据
- 如何等到添加表单数据后再追加数据
- 如何在追加数据并完成该数据的函数后连续运行函数
- jQuery - 如何向下滑动正文追加数据
- Onchange使用ajax在表行中追加数据
- 自动求和和和追加数据javascript
- 追加数据属性时出现无法识别的表达式
- 可处理的无限滚动追加数据和应用合并单元格格式
- 使用jQuery隐藏和追加数据
- 为什么弹出窗口不能'工作时追加数据到主体表
- 在另一个文件中追加数据
- 向Google地图的业务位置追加数据
- 如何选择在哪里追加数据