Laravel 5 分页 + 无限滚动 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33225256/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel 5 Paginate + Infinite Scroll jQuery
提问by senty
I am trying to use paginate()to achieve infinite scroll. I think the easiest way is using the 'infinite-scroll' to achieve this. If you have any other suggestion how to do it without infinite-scroll library, just using jQuery, I'd be happy to know..
我正在尝试使用paginate()来实现无限滚动。我认为最简单的方法是使用“无限滚动”来实现这一点。如果您有任何其他建议如何在没有无限滚动库的情况下做到这一点，只需使用 jQuery，我很高兴知道..
I am returning the variable to view like this:
我正在返回变量以查看如下：
public function index()
{
$posts = Post::with('status' == 'verified')
->paginate(30);
return view ('show')->with(compact('posts'));
}
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>
Javascript Part:
Javascript 部分：
$(document).ready(function() {
(function() {
var loading_options = {
finishedMsg: "<div class='end-msg'>End of content!</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 li:last a", // is this where it's failing?
itemSelector: "#content div.item"
});
});
});
However, this doesn't work. The ->render() part is working because I am getting [<[1]2]3]>] part. However, the infinite scroll doesn't work. I also don't get any errors in the console.
但是，这不起作用。->render() 部分正在工作，因为我得到了 [<[1]2]3]>] 部分。但是，无限滚动不起作用。我也没有在控制台中收到任何错误。
[<[1]2]3]>] is like this in the view:source:
[<[1]2]3]>]在view:source中是这样的：
<ul class="pagination">
<li class="disabled"><span>?</span> </li> // ?
<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> // ?
</ul>
采纳答案by cbloss793
You should be able to use the Pagination just fine as long as your call to get new posts is different than page load. So you'd have two Laravel calls:
只要您获取新帖子的调用与页面加载不同，您就应该能够很好地使用分页。所以你有两个 Laravel 调用：
1.) To provide the template of the page (including jQuery, CSS, and your max_page count variable -- view HTML) 2.) For the AJAX to call posts based on the page you give it.
1.) 提供页面模板（包括 jQuery、CSS 和您的 max_page 计数变量——查看 HTML） 2.) 让 AJAX 根据您提供的页面调用帖子。
This is how I got my infinity scroll to work...
这就是我如何让我的无限滚动工作......
HTML:
HTML：
<!-- Your code hasn't changed-->
<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>
<!-- Holds your page information!! -->
<input type="hidden" id="page" value="1" />
<input type="hidden" id="max_page" value="<?php echo $max_page ?>" />
<!-- Your End of page message. Hidden by default -->
<div id="end_of_page" class="center">
<hr/>
<span>You've reached the end of the feed.</span>
</div>
On page load, you will fill in the max_page variable (so do something like this: ceil(Post::with('status' == 'verified')->count() / 30);.
在页面加载时，您将填写 max_page 变量（因此请执行以下操作：ceil(Post::with('status' == 'verified')->count() / 30);.
Next, your jQuery:
接下来，您的 jQuery：
var outerPane = $('#content'),
didScroll = false;
$(window).scroll(function() { //watches scroll of the window
didScroll = true;
});
//Sets an interval so your window.scroll event doesn't fire constantly. This waits for the user to stop scrolling for not even a second and then fires the pageCountUpdate function (and then the getPost function)
setInterval(function() {
if (didScroll){
didScroll = false;
if(($(document).height()-$(window).height())-$(window).scrollTop() < 10){
pageCountUpdate();
}
}
}, 250);
//This function runs when user scrolls. It will call the new posts if the max_page isn't met and will fade in/fade out the end of page message
function pageCountUpdate(){
var page = parseInt($('#page').val());
var max_page = parseInt($('#max_page').val());
if(page < max_page){
$('#page').val(page+1);
getPosts();
$('#end_of_page').hide();
} else {
$('#end_of_page').fadeIn();
}
}
//Ajax call to get your new posts
function getPosts(){
$.ajax({
type: "POST",
url: "/load", // whatever your URL is
data: { page: page },
beforeSend: function(){ //This is your loading message ADD AN ID
$('#content').append("<div id='loading' class='center'>Loading news items...</div>");
},
complete: function(){ //remove the loading message
$('#loading').remove
},
success: function(html) { // success! YAY!! Add HTML to content container
$('#content').append(html);
}
});
} //end of getPosts function
There ya go! That's all. I was using Masonrywith this code also so the animation worked wonderfully.
有你去！就这样。我也在这段代码中使用了Masonry，所以动画效果很好。
回答by Pavel Berka
Easy and helpful is this tutorial - http://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll
本教程简单而有用 - http://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll
Final script could looks like this one
最终脚本可能看起来像这样
{!! HTML::script('assets/js/jscroll.js') !!}
<script>
$('.link-pagination').hide();
$(function () {
$('.infinite-scroll').jscroll({
autoTrigger: true,
loadingHtml: '<img class="center-block" src="/imgs/icons/loading.gif" alt="Loading..." />', // MAKE SURE THAT YOU PUT THE CORRECT IMG PATH
padding: 0,
nextSelector: '.pagination li.active + li a',
contentSelector: 'div.infinite-scroll',
callback: function() {
$('.link-pagination').remove();
}
});
});
</script>
You just need to use laravel's pagination
你只需要使用laravel的分页
{!! $restaurants->links() !!}
