<!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]); }
原文：https://www.cnblogs.com/Bblythes/p/14541900.html