jquery infinitescroll如何附加数据

Question

我想编写一个函数来做一件简单的事情。 我有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);
});

欢迎任何信息，谢谢。

Answer 1

你使用的是最新版本吗？

https://github.com/paulirish/infinite-scroll

我认为有一个新的选择：

appendCallback: true

Answer 2

在使用最新版本时，请尝试以下方法：

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

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

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

希望有帮助:)

Answer 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",             
    });

jquery infinitescroll如何附加数据

问题描述

3 个解决方案

解决方案1
2 2013-11-13 06:13:31

解决方案2
2 2013-11-14 13:52:12

解决方案3
1 2013-11-15 10:25:37

jquery infinitescroll如何附加数据

问题描述

3 个解决方案

解决方案1 2 2013-11-13 06:13:31

解决方案2 2 2013-11-14 13:52:12

解决方案3 1 2013-11-15 10:25:37

解决方案1
2 2013-11-13 06:13:31

解决方案2
2 2013-11-14 13:52:12

解决方案3
1 2013-11-15 10:25:37