gpt4 book ai didi

javascript - Laravel 5 分页 + 无限滚动 jQuery

转载 作者:数据小太阳 更新时间:2023-10-29 05:29:22 25 4
gpt4 key购买 nike

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

我正在返回变量以像这样查看:

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>

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"
});
});
});

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

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

<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>

最佳答案

本教程简单实用 - http://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll

最终脚本可能看起来像这样

{!! 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>

你只需要使用laravel的分页

{!! $restaurants->links() !!}

关于javascript - Laravel 5 分页 + 无限滚动 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33225256/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com