datatables分页+搜索
作者:互联网
<!DOCTYPE html>
<html>
<head>
<title>dataTables 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form onsubmit="return search()" >
文章标题:
<input type="text" class="input-text" style="width:250px;" value="" id="title" >
<button type="submit" class="btn btn-success" id="" name=""><i class="icon-search"></i> 搜索文章</button>
</form>
<!--第二步:添加如下 HTML 代码-->
<table id="table_id_example" class="display">
<thead>
<tr>
<th>ID</th>
<th>标题</th>
<th>作者</th>
<th>添加时间</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
<!-- 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>
<script>
function search() {
// 手动调用一次dataTable插件请求
dataTable.ajax.reload();
//取消表单默认行为
return false;
}
var dataTable = $('#table_id_example').DataTable({
// 每页显示的条数
"lengthMenu": [ 5, 8, 10, 15],
// 是否开启本地搜索
searching: false,
//开启服务器模式
serverSide: true,
// 发送ajax请求数据
ajax: {
type: "get",
url: "{:url('article/article/index')}",
// 发送数据
data: function (ret) {
ret.title = $.trim($('#title').val());
},
},
// 输出数据
columns: [
// defaultContent 和 className 可选参数
{'data': 'id'},
{'data': 'title'},
{'data': 'author'},
{'data': 'created_at'},
]
});
</script>
public function index(Request $request) { if ($request->isAjax()){ $count = \app\article\model\Article::count(); // 获取查询的起始位置 $start = $request->get("start")?:0; // 获取每页显示的条数 $length = min(100,$request->get("length",5)); // 获取文章的标题内容 $title = $request->get("title"); $data = \app\article\model\Article::limit($start,$length)->select(); // 判断是否传入标题 if (!empty($title)){ // 模糊查询 $data = \app\article\model\Article::where("title","like","%$title%")->limit($start,$length)->select(); } // 组装返回信息 $result = [ // 客户端调用服务器端次数标识 'draw' => $request->get('draw'), // 获取记录的总条数 'recordsTotal' => $count, // 数据过滤后的总数量 'recordsFiltered' => $count, // 查询的数据 'data' => $data ]; return json($result); } return view("index"); }
标签:datatables,title,get,request,length,搜索,article,data,分页 来源: https://www.cnblogs.com/ying0424/p/14534465.html