laravel自定义pagination实现ajax异步翻页

laravel实现翻页太简单了,几行代码就可以搞定,使用起来极其丝滑顺畅。但是由于laravel高度封装了翻页,要对其改造就显得比较尴尬了。

如有些场景下,我们需要异步翻页,看了laravel的文档,没找到相应的方法。如果要通过调用laravel关于翻页的相关方法,手工写一个分页,会很繁琐,对于这种操作,我是拒绝的。

既然可以通过修改样式改变分页,那么是不是可以通过js来修改分页的html代码,如:将分页a标签的href属性干掉,这样就不会进行跳转。接着截取分页的页码数字,再新增一个onclick事件,事件触发ajax请求,最后将服务器返回的数据替换现有分页

逻辑上是可行的,撸起袖子就干吧...

image.png

blade视图代码:

<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分页了,虽然看下来这种实现方式有点怪,至少需要改动的代码并不多,适合懒人

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券