无限滚动jQuery &Laravel 5分页

Infinite Scroll jQuery & Laravel 5 Paginate

本文关键字：Laravel 5分页 jQuery 滚动 无限      更新时间：2023-09-26

我成功地从控制器返回数据

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

同时，我成功地显示了我视图中的所有内容:

 <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"answers"#content div.post"?我的箱子里应该装些什么?

文档片段:

$('#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
});

编辑:My Javascript So Far

$(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]>]部分创建在页面底部，但无限滚动不起作用。而且，我在控制台中没有得到任何日志或错误。

首先，您需要像这样在关闭#contentdiv:

之后添加分页本身
{!! $posts->render() !!}

输出如下:

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

要覆盖分页演示器，请查看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"
    });
});

基本上，无限滚动条将为您调用分页链接，因此需要知道所有内容的位置，以便将它们放在一起

相关文章：