[JavaScript知识库]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>用户名</th>
            <th>性别</th>
            <th>手机号</th>
            <th>邮箱</th>
            <th>地址</th>
            <th>时间</th>
            <th>状态</th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>

3.写入js

<script>
    <!--第三步：初始化Datatables-->
    $(document).ready( function () {
        $('#table_id_example').DataTable({
            // 每页显示的条数
            "lengthMenu": [ 5, 8, 10, 15],
            // 是否开启本地搜索
            searching: false,
            serverSide:true,
            //请求后端地址
            "ajax": "{:url('后端接口地址')}",
            //此处data后边的值就是你字段的名称
            "columns": [
                {"data": "id"},
                {"data": "name"},
                {"data": "sex"},
                {"data": "phone"},
                {"data": "email"},
                {"data": "att"},
                {"data": "time"},
                {"data": "status"},
            ]

        });
    } );
</script>

4.laravel8 后端代码 实现分页

public function indexs(Request $request){
        //获取到分页开始的位置
        $start=$request->get('start');
        //获取到分页结束的位置
        $length=$request->get('length');
        //获取到搜索的条件
        $search=$request->get('search.value');
        //Illuminate\Support\Facades\Redis
        $data=Users::limit($start,$length)->select();
        foreach ($data as $key=>&$val){
            $val['username'] =str_replace($search, "<font style='color: #ff0000'>$search</font>",$val['name']);
        }
        return ['code'=>200,'msg'=>'查询成功','data'=>$data];
    }