javascript - jQuery无限滚动如何追加数据

标签 javascript jquery infinite-scroll

我想写一个函数来做一件简单的事情。我有 10 页数据,每页有 20 条记录。当用户进入第一页底部并点击 加载更多 ,我要加载第二页和的数据追加这些数据到第一页的显示数据。

我找到了一个名为infinitescroll 的jquery 插件。它对我来说很好,除了我不能附加更新的数据。

我的html:

<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

关于javascript - jQuery无限滚动如何追加数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19803209/

相关文章:

javascript - 删除表 JQUERY 中除最后一行之外的所有行

javascript - 如何使用 D3.js 在地理 map 中标记城市?

javascript - 新的 todo 创建但未显示 - 带有 EmberJS 的 todo 应用程序没有 ember-data

Javascript 页面自动上下滚动

javascript - 输入号码部分功能只能使用一次

jquery - 使用 stop() 暂停后恢复动画很慢

javascript - 在它使用的方法内重新启动 setInterval

javascript - 无限滚动加载后,滑动 slider 不起作用更多信息

javascript - 如何在内容加载完成时停止ui-grid的无限滚动?

jquery - 通过 Jquery 重置 datetime-local