无限滚动jQuery& Laravel 5 Paginate [英] Infinite Scroll jQuery & Laravel 5 Paginate

问题描述

我成功从Controller返回数据

I am successfully returning the data from Controller

public function index()
 {
    $posts = Post::with('status' == 'verified)
                      ->paginate(30);

    return view ('show')->with(compact('posts'));
 }

此外，我在视图中成功显示了所有内容：

Also, I am successfully showing everything in my view:

 <div id="content" class="col-md-10">
    @foreach (array_chunk($posts->all(), 3) as $row)
        <div class="post row">
            @foreach($row as $post)
                <div class="item col-md-4">
                    <!-- SHOW POST -->
                </div>
            @endforeach
        </div>
    @endforeach
    {!! $posts->render() !!}
 </div>

到目前为止一切正常。

但是，我根本没有得到官方文件。什么是' div.navigation '和' #content div.post '？在我的情况下它们应该是什么？

However, I didn't get the official documentation at all. What is 'div.navigation' and '#content div.post'? What should they be in my case?

来自文档的片段：

$('#content').infinitescroll({

   navSelector  : "div.navigation",            
                   // selector for the paged navigation (it will be ?>hidden)
    nextSelector : "div.navigation a:first",    
                   // selector for the NEXT link (to page 2)
    itemSelector : "#content div.post"          
                   // selector for all items you'll retrieve
});

编辑：我的Javascript到目前为止

$(document).ready(function() {
(function() {
     var loading_options = {
        finishedMsg: "<div class='end-msg'>Congratulations! You've reached the end of the internet</div>",
        msgText: "<div class='center'>Loading news items...</div>",
        img: "/assets/img/ajax-loader.gif"
     };

     $('#content').infinitescroll({
         loading: loading_options,
         navSelector: "ul.pagination",
         nextSelector: "ul.navigation a:first",
         itemSelector: "#content div.item"
     });
 });
}); 

[< [1] 2] 3]>]部分创建于底部页面，但无限滚动不起作用。另外，我在控制台中没有记录或错误。

The [<[1]2]3]>] part is created at the bottom of the page but infinite scroll doesn't work. Also, I get no logs or errors in the console.

推荐答案

首先你需要在关闭后添加这样的分页本身 #content div：

First you need to add the pagination itself like this after the closing #content div:

{!! $posts->render() !!}

这将输出如下内容：

<ul class="pagination"><li><a>...</a></li>

要覆盖分页演示者，请查看这个答案在SO上。

To overwrite the pagination presenter have a look at this answer on SO.

然后你的配置如下：

$(document).ready(function() {
    var loading_options = {
        finishedMsg: "<div class='end-msg'>Congratulations! You've reached the end of the internet</div>",
        msgText: "<div class='center'>Loading news items...</div>",
        img: "/assets/img/ajax-loader.gif"
    };

    $('#content').infinitescroll({
        loading: loading_options,
        navSelector: "ul.pagination",
        nextSelector: "ul.pagination a:first",
        itemSelector: "#content div.item"
    });
}); 

基本上，无限卷轴会为你调用分页链接，因此需要知道，一切都在哪里将所有这些放在一起。

Basically, the infinite scroller will call the pagination links for you and thus needs to know, where everything is located to put it all together.

这篇关于无限滚动jQuery&amp; Laravel 5 Paginate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！