laravel8 实现Datatables分页

什么是Datatables分页？

DataTables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

1.从Datatables官网引入js和css

手册 Datatables中文网

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

2.HTML前端页面，字段根据自己需求进行编辑。

<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th>id</th>
        <th>名称</th>
        <th>工号</th>
        <th>部门</th>
        <th>手机号码</th>
        <th>职位</th>
        <th>类型</th>
        <th>身份证号</th>
        <th>入职日期</th>
    </tr>
    </thead>
    <tbody>
{{--    用Datatables进行数据渲染--}}
    </tbody>
</table>

3.前端页面写入js代码

参考网址：数据 手册 Datatables中文网

<script>
    <!--第三步：初始化Datatables-->
    $(document).ready(function () {
        $('#table_id_example').DataTable({
            //每页显示条数
            "lengthMenu": [2, 3, 4, 5],
            //开启服务
            serverSide: true,
            //通过ajax
            ajax: 'addlist',
            //传值
            columns: [
                {data: 'id'},
                {data: 'name'},
                {data: 'number'},
                {data: 'count'},
                {data: 'phone'},
                {data: 'add_count'},
                {data: 'star_lei'},
                {data: 'p_number'},
                {data: 'creat_time'},
            ]
        });
    });
</script>

4.从后台查询出数据。

//datatables分页
    public function addlist(Request $request)
    {
        //接受前端的值
        $length = $request->get('length');
        $start = $request->get('start');
        
        //实例化模型
        $model = new Last();
        
        //查出数据并渲染到前端
        $date = $model->offset($start)->limit($length)->get();
        return ['code' => 200, 'msg' => '查询成功', 'data' => $date];
    }

5.实现效果