Laravel8 利用Datatables实现分页

最新推荐文章于 2022-06-01 16:41:22 发布

Dragon-v

最新推荐文章于 2022-06-01 16:41:22 发布

阅读量471

点赞数

分类专栏： Laravel 文章标签： laravel javascript

本文链接：https://blog.csdn.net/m0_62199749/article/details/121015762

版权

Laravel 专栏收录该内容

15 篇文章

订阅专栏

1.引入JS和CSS

<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 align="center">
            <th>ID</th>
            <th>用户名</th>
            <th>性别</th>
            <th>手机号</th>
            <th>邮箱</th>
            <th>地址</th>
            <th>时间</th>
            <th>状态</th>
        </tr>
    </thead>
    <tbody align="center">

    </tbody>
</table>

3.写入JS代码

<script>
    // <!--第三步：初始化Datatables-->
    $(document).ready( function () {
        $('#table_id_example').DataTable({
            // 每页显示的条数
            "lengthMenu": [ 5, 8, 10, 15],
            // 是否开启本地搜索
            searching: false,
            serverSide:true,
            //请求后端地址
            "ajax": "{:url('test/Seek/indexs')}",
            //此处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 json(['code'=>200,'msg'=>'查询成功','data'=>$data]);
    }

5.分页效果如下