laravel8 利用Datatables实现分页

1.引入js

<!--第一步：引入Javascript / CSS （CDN）-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
 
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.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 表格 表头的值根据实际情况来设置

<!--第二步：添加如下 HTML 代码-->
<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th>id</th>
        <th>title</th>
        <th>content</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

3.写入js

<script>
    $(document).ready( function () {
        $('#table_id_example').DataTable({
            // 每页显示的条数
            "lengthMenu": [ 5, 10, 15],
            // 是否开启本地搜索
            searching: false,
            serverSide:true,
            //请求后端地址
            "ajax": {
                url:'数据接口'
            },
            //此处data后边的值就是你字段的名称
            "columns": [
                {"data": "id"},
                {"data": "title"},
                {"data": "content"}
            ]
        });
    });
</script>

4.laravel8 后端代码 实现分页

public function getArticle(Request $request)
    {
        //获取到分页开始的位置
        $start=$request->get('start');
        //获取到分页结束的位置
        $length=$request->get('length');
        //Illuminate\Support\Facades\Redis
        $data=Article::select('id','title','content')->offset($start)->limit($length)->get();
        return ['code'=>200,'msg'=>'查询成功','data'=>$data];
    }