Laravel 5 分页 + 无限滚动 jQuery [英] Laravel 5 Paginate + Infinite Scroll jQuery

问题描述

我正在尝试使用 paginate() 来实现无限滚动.我认为最简单的方法是使用无限滚动"来实现这一点.如果您有任何其他建议如何在没有无限滚动库的情况下做到这一点，只需使用 jQuery，我很高兴知道..

我正在返回变量以查看如下:

公共函数索引(){$posts = Post::with('status' == 'verified')-> 分页(30)；返回视图 ('show')->with(compact('posts'));}

我的观点:

@foreach (array_chunk($posts->all(), 3) as $row)<div class="post row">@foreach($row 作为 $post)<div class="item col-md-4"><!-- 显示帖子-->
@endforeach

@endforeach{！！$posts->render() !!}

Javascript 部分:

$(document).ready(function() {(功能() {var loading_options = {finishMsg: "<div class='end-msg'>内容结束！</div>",msgText: "<div class='center'>正在加载新闻项目...</div>",img: "/assets/img/ajax-loader.gif"};$('#content').infinitescroll({加载:loading_options，navSelector: "ul.pagination",nextSelector: "ul.pagination li:last a",//这是失败的地方吗?itemSelector: "#content div.item"});});});

然而，这行不通.->render() 部分正在工作，因为我得到了 [<[1]2]3]>] 部分.但是，无限滚动不起作用.我也没有在控制台中收到任何错误.

[<[1]2]3]>] 在视图中是这样的:来源:

<li class="disabled"><span>«</span>//«<li class="active"><span>1</span></li>//1<li><a href="http://test.dev/?page=2">2</a></li>//2<li><a href="http://test.dev/?page=3">3</a></li>//3<li><a href="http://test.dev/?page=2" rel="next">»</a></li>//»

解决方案

只要您获取新帖子的调用与页面加载不同，您就应该能够很好地使用分页.所以你有两个 Laravel 调用:

1.) 提供页面的模板(包括 jQuery、CSS 和您的 max_page 计数变量——查看 HTML)2.) 让 AJAX 根据您提供的页面调用帖子.

这就是我如何让我的无限卷轴工作......

HTML:

<div id="content" class="col-md-10">@foreach (array_chunk($posts->all(), 3) as $row)<div class="post row">@foreach($row 作为 $post)<div class="item col-md-4"><!-- 显示帖子-->

@endforeach

@endforeach{！！$posts->render() !!}