logo标签列表

jQuery无限滚动如何追加数据

javascriptjqueryinfinite-scroll
4
我想编写一个函数来完成一个简单的任务。我有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);
});

任何信息都受欢迎，谢谢。
你正在使用一些模板。它是哪一个？ - Vishal Sharma
@vishalsharma Laravel4 - diligent
你尝试过使用类而不是ID吗？ - Bellash
@Bellash 不，只需从演示中复制并进行少量修改即可。 - diligent
@vishalsharma 这可能是 Blade。 - MD. Sahib Bin Mahboob
3个回答
2
2

由于您正在使用最新版本，请尝试以下方法：

  1. Set appendCallback:true , already suggested by @Greg

  2. Pass a function to finish option : finish:funciton(content){//do somethting}.

    From the doc :

    The finished function is called after each AJAX call that loads new content, after the loading message is displayed. If the option is not overridden, or a falsy value is passed it, the default action will be to fade-out the loading message.

    And line#376 of infinitescroll.js source code indicates that it passed the output which it's retrieved to append in the DOM. 

        opts.loading.finished.call($(opts.contentSelector)[0],opts);
希望这能帮到您 :)
1
你可以尝试使用不同的“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. Sahib Bin Mahboob
@MD.SahibBinMahboob 谢谢，兄弟。不管我使用静态HTML文件还是其他方式，都无法正常工作。我查看了源代码，但没有找到原因。还是谢谢你的帮助。 - diligent
1
你能提供使用选项 errorCallback: function(){console.log('test');} 的结果吗？你在哪里找到了包含 loading:{...} 的选项？文档中只提到了 loadingText 和 loadingImg。 - Pierre
@Pierre 谢谢。我已经解决了这个问题，稍后我会发布我的解决方案 :) - diligent
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接