jQuery无限滚动如何追加数据答案

【问题标题】：jquery infinitescroll how to append datajQuery无限滚动如何追加数据
【发布时间】：2013-11-17 03:59:34
【问题描述】：

我想写一个函数来做一件简单的事情。我有 10 页数据，每页有 20 条记录。当用户进入第一页底部并点击Load More时，我想加载第二页的数据并将这些数据追加到第一页的显示数据中。 p>

我找到了一个名为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);
});

欢迎提供任何信息，谢谢。

【问题讨论】：

你使用了一些模板。它是哪一个...
@vishalsharma laravel4
您是否尝试过使用类而不是 Id？
@Bellash 不，只是复制并从演示中进行一些修改
@vishalsharma 可能是刀片

标签： javascript jquery infinite-scroll

【解决方案1】：

我认为有一个新的选择：

appendCallback: true

【讨论】：

【解决方案2】：

当您使用最新版本时，请尝试以下操作：

设置appendCallback:true，@Greg 已建议
传递函数完成选项：finish:funciton(content){//do somethting}。

来自doc：

finished 函数在每次加载新内容的 AJAX 调用之后调用，在加载消息显示之后。如果该选项未被覆盖，或者传递了一个虚假值，则默认操作是淡出加载消息。

infinitescroll.js 源代码的第 376 行表明它传递了它检索到的输出以附加到 DOM 中。
```
    opts.loading.finished.call($(opts.contentSelector)[0],opts);
```

希望有帮助:)

【讨论】：

【解决方案3】：

您可以尝试使用不同的“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",             
    });

【讨论】：

@diligent 你试过我的答案了吗？它应该根据文档工作
@MD.SahibBinMahboob 谢谢伙计，它不起作用，即使我使用静态 html 文件，它也不起作用。我看了它的源码，没找到原因。不过，谢谢伙计。
能否给出使用option的结果：errorCallback: function(){console.log('test');}你在哪里发现options包含loading:{...}关于loadingText和loadingImg的文档？
@Pierre 谢谢。我已经解决了这个问题，稍后我会发布我的解决方案:)