tp5中datatables使用

后端数据分页，高亮显示

public function index()
    {
        return view('index');
    }

    public function showList(Request $request)
    {
        //        搜索的条件
        $search = $request->get('search.value');
        //        分页开始的位置
        $start = $request->get('start');
        //        分页结束的位置
        $length = $request->get('length');
        //        条件存入缓存
        Cache::store('redis')->set('search',$search);
        //        取出条件
        $where = Cache::store('redis')->get('search');
        //        分页查询
        $data = Db::table('bank_cardimages')->where('card_name','like',"%$where%")->limit($start,$length)->select();
        //        高亮显示
        foreach ($data as &$val){
            $val['card_name'] = str_replace($search,"<span style='color: red;font-weight: bold'>$search</span>",$val['card_name']);
        }
//        返回数据
        return json(['code' => 200,'msg' => '查询成功','data' => $data]);
    }

 

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables 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>
</head>
<body>
<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th>ID</th>
        <th>卡名</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
</body>
</html>
<script>
    $(document).ready( function () {
        $('#table_id_example').DataTable({
            serverSide:true,
            ajax: {
                url: "{:url('showList')}",
                type: 'GET'
            },
            "columns": [
                {"data": "id"},
                {"data": "card_name"},
            ]
        });
    } );
</script>

 

posted @ 2021-03-16 11:06  SlytherinGirl  阅读(118)  评论(0)    收藏  举报