我有一个名为 posts.blade.php
的视图,它包含在 home.blade.php
中:
<div id="posts">
@foreach ($posts as $post)
<div class="list-item clearfix">
<div class="content">
<img src="{{ URL::to($post->thumbnail) }}" alt="" />
<h1>{{{ $post->title }}}</h1>
</div>
<div class="score">{{ $post->rating }}</div>
</div>
@endforeach
<div id="pagination">{{{ $posts->links() }}}</div>
</div>
当用户搜索某些帖子时,控制器的 postSearch()
函数会返回JSON响应:
function postSearch()
{
$posts = $posts->select(...)->where(...)->orderBy(...)->paginate(5); //Search posts
return Response::json(View::make('includes.posts', ['posts' => $posts])->render());
}
并且jQuery在 #posts
div上附加HTML:
$('#search').submit(function(e) {
e.preventDefault();
var form = $(this);
$.post(form.attr('action'), form.serialize(), function(data) {
$('#posts').html(data);
});
});
这很完美 . 但现在当我点击分页链接时,页面重新加载,我的搜索结果消失了(显而易见) . 我如何分页这些帖子?我读过this,this和this文章,但我不明白如何实现它 .
Edit
到目前为止,这是我的jQuery分页:
$('#posts').on('click', '.pagination a', function(e) {
e.preventDefault();
var url = $(this).attr('href'),
page = url.split('page=')[1],
data = $('#search').serializeArray();
data.push({page: page}); // Add page variable to post data
console.log(data);
$.post($('#search').attr('action'), data, function(data) {
$('#posts').html(data['posts']);
});
});
这是我点击分页链接时发送的数据(第2页):
不幸的是,没有任何反应,第1页的帖子一直在显示 .
4 回答
我对Laravel的分页不是很熟悉,但从你列出的链接来看,它看起来并不太难 . 此代码未经测试,但......
更新
如果分页链接错误(就像OP的那些),你必须自己构建url .
只需获取您想要的网址并添加
?page=#number
即可 .我有完美的工具 . 请看看这个回购https://github.com/themightysapien/ajaxtable
请阅读文档,它非常易于使用,专门用于laravel . 您需要做的就是返回结果,如下例所示 .
添加所需文件
通过表格中的 data-requestUrl 属性初始化您的ajax网址 . 在页面中添加 id="paginationWrapper" div,您希望在其中显示分页 .
如果您有任何问题,请在本地服务器中运行repo,并查看html标记和插件选项的来源 .
在博客中发帖的示例,解决删除按钮上的分页重新加载:(sinple foreach但你必须给面板和按钮一个id和一个类按钮并使用$ post-> id来定义所有)
最后的诀窍不是调用使用pagination()的视图/控制器,而是根据需要使用javascript更改视图 .
在最后的视图javascript:
在控制器销毁功能中(注意你将$ post-> id作为数据发送到ajax,它用于定义选择器以隐藏你删除的帖子面板):
在javascript最后一个函数“location.reload()”是为了收取flash消息 .
我正在使用以下js获取有关href click的数据 .
有关完整示例,您可以访问http://www.tutsway.com/laravel-ajax-pagination-example.php .