美文网首页程序员
laravel自定义pagination实现ajax异步翻页

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

作者: 闲睡猫 | 来源:发表于2019-03-29 17:04 被阅读0次

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

    相关文章

      网友评论

        本文标题:laravel自定义pagination实现ajax异步翻页

        本文链接:https://www.haomeiwen.com/subject/rghrbqtx.html