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

章鱼喵

发布于 2019-04-01 14:48:15

1.8K0

发布于 2019-04-01 14:48:15

文章被收录于专栏：codingcoding

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.03.29 ，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax