Laravel中paginate+ajax分页加载

分页是每个程序猿写了无数变得功能，Laravel中自带paginate进行分页非常简单又实用。但是paginate基本是通过URL修改page参数进行分页这样就遇到一个页面加载缓慢的问题，用户友好性能非常的差，所以没办法基本的分页都是需要采用ajax分页。
paginate 分页基本用法
自定义分页样式

效果图.gif

1.html

主blade中包含了两个表格blade

<div class="row">
    <div class="col-sm-4">
            <section id="integrals">
                @include('admin.report.integralload')
            </section>
    </div>
    <div class="col-sm-8">
            <section id="wishs">
                @include('admin.report.wishload')
            </section>
    </div>
</div>

integralload.blade.php

<div class="box" id="integrals_load">
    <div class="box-header">
        <h3 class="box-title">公益指数({{$integrals_sum}}分)</h3>
        <div class="box-tools">
            {{$integrals->links('admin.report.pagination')}}
        </div>
    </div>
    <div class="box-body no-padding" style="min-height: 220px;">
        <table class="table">
            <tbody>
            <tr>
                <th style="width: 10px">#</th>
                <th>公益项</th>
                <th>指数</th>
                <th>日期</th>
            </tr>
            @foreach($integrals as $key => $integral)
                <tr>
                    <td>{{$key + 1}}.</td>
                    <td>{{$integral -> name}}</td>
                    <td>{{$integral -> integral}}</td>
                    <td>{{$integral->created_at}}</td>
                </tr>
            @endforeach
            </tbody></table>
    </div>
</div>

wishload.blade.php

<div class="box" id="wishs_load">
    <div class="box-header">
        <h3 class="box-title">微心愿({{$wishs_count}}个)</h3>

        <div class="box-tools">
            {{$wishs->links('admin.report.pagination')}}
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body no-padding" style="min-height: 220px;">
        <table class="table">
            <tbody>
            <tr>
                <th style="width: 10px">#</th>
                <th>微心愿</th>
                <th>社区</th>
                <th>心愿状态</th>
                <th>日期</th>
            </tr>

            @foreach($wishs as $key => $wish)
                <tr>
                    <td>{{$key + 1}}.</td>
                    <td title = "{{$wish -> title}}"><a href="{{url('/admin/wish/'.$wish->id.'/edit')}}" target="_blank">{{str_limit($wish -> title,20)}}</a></td>
                    <td>{{$wish -> bbs ->name}}</td>
                    <td>
                        @if($wish->apply_state == 0)
                         <span class='label label-warning'>未审核</span>
                        @elseif($wish->apply_state == 5)
                        <span class='label label-success'>审核成功</span>
                        @elseif($wish->apply_state == 10)
                        <span class='label label-danger'>审核失败</span>
                        @endif
                    </td>

                    <td>
                        {{$wish->created_at}}
                    </td>
                </tr>
            @endforeach

            </tbody></table>
    </div>
    <!-- /.box-body -->
</div>

2.javascript ajax 提交

监听a超链接点击事件触发ajax

    $(function() {
        $('body').on('click', '#wishs .pagination a', function(e) {
            e.preventDefault();
            var url = $(this).attr('href');
            var id = "wishs";
            getArticles(url,id);

        });

        $('body').on('click', '#integrals .pagination a', function(e) {
            e.preventDefault();
            var url = $(this).attr('href');
            var id = "integrals";
            getArticles(url,id);

        });

        function getArticles(url,id) {

            $('#'+id+'_load').append('\<div class="overlay"\> \<i class="fa fa-refresh fa-spin"\>\<\/i\> \<\/div\>');

            $.ajax({
                url : url,
                data : {id:id}
            }).done(function (data) {
                $('#'+id).html(data);
            }).fail(function () {
                alert('Articles could not be loaded.');
            });

            window.history.pushState("", "", url);
        }
    });

4.php后台

判断request是不是ajax进行操作

public function user($user_id, Request $request)
    {

        $user = Users::find($user_id);

        $wishs = Wishs::where('users_id', '=', $user_id)->orderBy('created_at', 'desc')->paginate(5);
        $wishs_count = Wishs::where('users_id', '=', $user_id)->count();

        $integrals = Integrals::where('users_id', '=', $user_id)->orderBy('created_at', 'desc')->paginate(5);
        $integrals_sum = Integrals::where('users_id', '=', $user_id)->sum('integral');

        $signs_count = Signs::where('users_id', '=', $user_id)->count();

        if ($request->ajax()) {
            $data = $request->all();
            if (isset($data['id'])) {
                if ($data['id'] == "wishs") {
                    return $view = view('admin.report.wishload', ['wishs' => $wishs, 'wishs_count' => $wishs_count])->render();
                } elseif ($data['id'] == "integrals") {
                    return $view = view('admin.report.integralload', ['integrals' => $integrals, 'integrals_sum' => $integrals_sum])->render();
                } 
            }

        }

        $view = view('admin.user', [
            'user' => $user,
            'wishs' => $wishs,
            'integrals' => $integrals,
            'integrals_sum' => $integrals_sum,
            'wishs_count' => $wishs_count,
            'signs_count' => $signs_count,
            'snapshots' => $snapshots,
            'snapshots_count' => $snapshots_count]);

        $content = Admin::content(function (Content $content) use ($view) {
            $content->header('党员信息');
            $content->row($view->render());
        });

        return $content;
    }

用起来还是挺方便，加载更多可以同理完成操作
优点是借用了blade的渲染优点，不用在js端拼繁琐的HTML代码。

cut.png