laravel实现翻页太简单了,几行代码就可以搞定,使用起来极其丝滑顺畅。但是由于laravel高度封装了翻页,要对其改造就显得比较尴尬了。
如有些场景下,我们需要异步翻页,看了laravel的文档,没找到相应的方法。如果要通过调用laravel关于翻页的相关方法,手工写一个分页,会很繁琐,对于这种操作,我是拒绝的。
既然可以通过修改样式改变分页,那么是不是可以通过js来修改分页的html代码,如:将分页a标签的href属性干掉,这样就不会进行跳转。接着截取分页的页码数字,再新增一个onclick事件,事件触发ajax请求,最后将服务器返回的数据替换现有分页
逻辑上是可行的,撸起袖子就干吧...
image.pngblade视图代码:
<div class="content">
<!-- 具体的内容 -->
</div>
<!-- 分页 -->
<ul class="page ajax-page">
{{ $data->render() }}
</ul>
<script>
$('.ajax-page .pagination').find('a').each(function(e){
let page=$(this).attr('href').split('page=')[1];
$(this).removeAttr('href'); // 干掉href属性
$(this).attr("onclick", "AjaxPage(" + page + ")"); // 新增onclick事件
});
</script>
ajax异步请求函数:
<script>
let url = "{{ route('home.ajax-content') }}";
function AjaxPage(page) {
$.get(page:page}, function (data) {
$('div.content').html(data);
})
}
</script>
后端控制器方法:
public function ajaxContent(Request $request)
{
$data = Content::query()
->paginate(15);
return view('home.ajax_content', [
'data' => $data,
]);
}
ajax返回的数据可以是json,也可以是完整的html内容。前者需要在前端用js进行组装;后者需要新建一个ajax视图文件
综上,就能实现ajax分页了,虽然看下来这种实现方式有点怪,至少需要改动的代码并不多,适合懒人
网友评论