datatable
2018-08-21 本文已影响0人
DragonRat
相关文档：http://www.tuicool.com/articles/NBBnum
中文语言包：https://datatables.net/plug-ins/i18n/Chinese
语言包：https://datatables.net/plug-ins/i18n
layer相关插件：http://layer.layui.com/api.html
http://www.tuicool.com/articles/NBBnum
API查看: http://www.datatables.club/reference/option/
使用：
- 引入资源
<!-- css -->
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/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.15/js/jquery.dataTables.js"></script>
<a href="" class="btn btn-success">编辑</a> <a href="" class="btn btnda">删除</a>
2. 初始化
$(document).ready(function(){
$('#myTable').DataTable();
});
服务器端返回参数格式：
{
"draw": 2,
"recordsTotal": 11,
"recordsFiltered": 11,
"data": [
{
"id": 1,
"firstName": "Troy",
"lastName": "Young"
},
{
"id": 2,
"firstName": "Alice",
"lastName": "LL"
},
{
"id": 3,
"firstName": "Larry",
"lastName": "Bird"
}
// ......
]
}
测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data插件使用</title>
<!-- css -->
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/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.15/js/jquery.dataTables.js"></script>
<style>
.table.dataTable thead th, table.dataTable thead td{
border-bottom:none;
}
.table.dataTable.no-footer{
border-bottom: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
color: #333 !important;
border: 1px solid #979797;
background-color: white;
}
</style>
</head>
<body>
<br><br>
<br><br>
<br><br>
<div class="container">
<div class="row">
<input type="text" id="word" name="word" value="" class="col-md-2 col-md-offset-10"> <button type="button" id="btnSearch" class="btn btn-default">搜索</button>
</div>
<table class="table table-hover table-bordered" id="datatable">
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>曹阳</td>
<td>12</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>mark</td>
<td>34</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>ytest</td>
<td>52</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
var table = $("#datatable").dataTable({
// 方式一设置中文
"oLanguage":{
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
}
},
// "aoColumns": [
// // {"bVisible": false, "aTargets": [1]}, // 列表的显示与否
// // {"orderable": false, "aTargets": [0,1]} // 不参与排序的列表
// ],
// 方式二设置中文
"oLanguage": {
"sUrl": "Chinese.lang.txt"//中文语言包路径
},
// 设置每页分页条数选项
"lengthMenu": [[2, 10, 25, 50, -1], [2, 10, 25, 50, 'all']],
// "ordering": false, // 禁止排序
// "paging": false, // 关闭分页
// "aaSorting": [[2, 'asc']], // 默认第几个字段进行排序
"order": [[ 1, 'asc' ]],
"bStateSave": true, //页面刷新后，是否还保持页面的状态
// "data": [{},{}] // 本地数据渲染
// 是否开启查询进度
// "processing": true,
// 是否开启搜索
"searching": false,
// 是否开启服务器查找功能
"serverSide": true,
// ajax请求
"ajax": {
"url" : './data.php',
"type": 'post',
// 传递给服务器的参数
"data": function(data) {
console.log( data );
// 每页显示数量
data.pageSize = data.length;
// 页码计算
data.page = data.start >= data.length ? Math.ceil( data.start / data.length
) + 1 : 1;
data.myword = $("#word").val();
// data._token = "{{ csrf_token() }}";
}
},
// 每行被创建时的调用
"createdRow": function(row, data) {
console.log( row );
console.log( data );
},
// 数据表中的列和返回字段的关系
"columns": [
// 是否参与排序和显示
// {"data": "id", "bSortable": true, "visible": false},
{"data": "id", "bSortable": true,},
// 不参与填充的字段
// {"data": null, defaultContent:""},
{"data": "age", "bSortable": true},
{"data": "name", "bSortable": true,}
],
// 自定义字段显示方式
"columnDefs": [
{
"targets": [3],
"name": 'show',
"data": "name",
"render": function(data, type, full) {
return "<a href='/update?id=" + data + "'>Update</a>";
}
}
]
});
$("#btnSearch").click(function(event) {
// 获取datatable对象，然后进行ajax刷新
table.api().ajax.reload();
});
});
</script>
</html>
测试：
<?php
// var_dump($_POST);die();
$data = '{
"draw": 2,
"recordsTotal": 11,
"recordsFiltered": 11,
"data": [
{
"id": 1,
"name": "T等到roy",
"age": "Young"
},
{
"id": 2,
"name": "Alice",
"age": "LL"
},
{
"id": 3,
"name": "Larry",
"age": "Bird"
}
]
}';
// $query = UsersModel::query();
// $query->where('updated_at', '>' , 'start');
// $query->where('updated_at', '<' , 'end');
// $query->limt(2)->offset(0);
// $query->get();
// whereIn()->get()->each(function($Item)){}
echo $data;
?>
