datatables后端分页 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
</head>
<body>

<!--第二步：添加如下 HTML 代码-->
<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th>ID</th>
        <th>标题</th>
    </tr>
    </thead>
    <tbody>
    {volist name="data" id="vo"}
    <tr>
        <td>{$vo.id}</td>
        <td>{$vo.title}</td>
    </tr>
    {/volist}

    </tbody>
</table>

</body>
</html>
<script>
    // <!--第三步：初始化Datatables-->
    $(document).ready( function () {
        $('#table_id_example').DataTable({
            serverSide: true,
            ajax: {
                url: "{:url('showList')}",
                type: 'GET'
            },
            "columns": [
                {"data": "id"},
                {"data": "title"},
            ]
        });
    } );
</script>
    public function show()
    {
        $data=\app\test\model\Essay::select();
        return view("show",compact("data"));
    }
    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('essay')->where('title','like',"%$where%")->limit($start,$length)->select();
 //        高亮显示
         foreach ($data as &$val){
                    $val['title'] = str_replace($search,"<span style='color: red;font-weight: bold'>$search</span>",$val['title']);
         }
//        返回数据
         return json(['code' => 200,'msg' => '查询成功','data' => $data]);
    }

 

posted @ 2021-03-16 10:12  换机油的列夫  阅读(149)  评论(0)    收藏  举报