无限滚动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& Laravel 5 Paginate的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!