tp5.1结合ajax和layui实现分页根据年区分数据

<?php
namespace app\index\controller;
use app\common\model\GuCase;
use think\Request;
class CaseController extends Controller
{
    public function caseList(Request $request, GuCase $model)
    {
        $param = $request->param();
        if ($request->isPost()) {
        if (empty($param) || !isset($param['time'])|| $param['time'] == '') {
            $year_time = date('Y', $model::max('case_time'));
        } else {
            $reg='/(\d{4}(\.\d+)?)/is';//匹配数字的正则表达式
            preg_match_all($reg,$param['time'],$result);
            $year_time = $result[1][0];
        }
        $em = $year_time . '-' . '12' . '-1 23:59:59';
        $end_time = date('Y-m-d H:i:s', strtotime($em));
        $start_time =  $year_time.'-01-01 0:0:0';
        $year = $model->field(['case_time',])->group('case_time')->order(['case_time'=>'desc'])->append(['case_year'])->select();
        foreach($year as $vo){
            $yearData[] = $vo['case_year'];
        }
        $yearData =  array_unique($yearData);
        $query = $model->whereBetweenTime('case_time',$start_time,$end_time)->order(['id' => 'desc']);
        $count = $query->count();
        $data = $query->page($param['page'], $param['limit'])->append(['describe'])->select();
        return success('成功', '', ['data'=>$data,'count'=>$count,'yearData'=>$yearData,'year'=>$year_time]);
        }
        return $this->fetch();
    }
}

<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
//注意这里需要引入jq 
<link rel="stylesheet" href="__PLUGINS__/layer/mobile/need/layer.css">
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
<div class="i_banner lbanner"></div>
<!-- 面包屑导航 -->
<div class="bread_nav">
    <div class="main_content">
        <a href="/">首页</a>
        <span> > </span>
        <span>历年案件</span>
    </div>
</div>
<!-- 历年案件 -->
<div class="year_case">
    <div class="case_year">
        <!-- 时间列表 -->
        <ul class="year" id="yearData"> </ul>
        <!-- 数据列表 -->
        <ul class="cases" id="caseData"></ul>
    </div>
    <div class="pagelist" id="page">
    </div>
</div>
<script type="text/javascript">
    var page = 1;
    var counts = 0;
    var page_counts = 0;
    var html;
    var dataYear = '';
    function getData() {
        $.ajax({
            url: "{:url('caseList')}", //请求的url地址
            dataType: "json", //返回格式为json
            data: {
                page: page,
                limit: 6,
                time: dataYear
            }, //参数值
            type: "post", //请求方式
            beforeSend: function () {
                layer.load();
            },
            success: function (retrunData) {
                counts = retrunData.data.count;
                page_counts = retrunData.data.data.length;
                layui.use('laytpl', function () {
                    var laytpl = layui.laytpl;
                    // 返回数据
                    var info = retrunData.data;
                    // 时间列表
                    var yearText = yearHtml.innerHTML,
                        yearView = document.getElementById('yearData');
                    laytpl(yearText).render(info, function (html) {
                        yearView.innerHTML = html;
                    });
                    // 案例列表
                    var caseText = caseHtml.innerHTML,
                        caseView = document.getElementById('caseData');
                    laytpl(caseText).render(info, function (html) {
                        caseView.innerHTML = html;
                    });
                });
                layer.closeAll('loading'); //关闭loading
            },
            complete: function () {
                if (page_counts > 0) {
                    if (page == 1) {
                        $('#page').show();
                        layui.use(['laypage', 'layer'], function () {
                            var laypage = layui.laypage,
                                layer = layui.layer;
                            //自定义样式
                            laypage.render({
                                elem: 'page',
                                limit: 6,
                                count: counts,
                                theme: '#ffcc00',
                                jump: function (obj, first) {
                                    if (!first) {
                                        console.log(obj);
                                        page = obj.curr
                                        getData();
                                    }
                                }
                            });
                        })
                    }
                } else {
                    $('#page').hide();
                }
            },
            error: function () {
                layer.closeAll('loading'); //关闭loading
            }
        });
    }
    getData();
    $(document).on('click','#yearData li',function(){
        dataYear = $(this).find(".year_p").html();
        getData();
    })
</script>
<script id="yearHtml" type="text/html">
    {{#  layui.each(d.yearData, function(index, item){ }}
    <li>
        <div class="achieve_bg">
            <div class="achieve_one case_date {{#  if( item == d.year){ }} case_active  {{#  } }} ">
                <p class="year_p">- {{item}} -</p>
            </div>
            <i class="achieve_x case_x"></i>
        </div>
    </li>
    {{#  }); }}
</script>
<script id="caseHtml" type="text/html">
    {{#  layui.each(d.data, function(index, item){ }}
    <li onclick="javascript:window.location.href='/case_detail/{{item.id}}.html'">
        <div class="achieve_co">
            <div class="achieve_content">
                <h2>{{item.title}}</h2>
                <p>{{item.describe}}</p>
            </div>
            <div class="more_det more_case">
                <a href="/case_detail/{{item.id}}.html">查看详情</a>
            </div>
        </div>
    </li>
    {{#  }); }}
</script>