jquery表格插件Datatables使用、快速上手
Datatables使用
一、简介
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。操作DOM的
- 分页，即时搜索和排序，
- 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
- 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
- 各式各样的扩展: Editor, TableTools, FixedColumns ……
- 丰富多样的option和强大的API
- 支持国际化
- 超过2900+个单元测试
- 免费开源
- 更多特性请到官网查看
二、使用
1、引入相关js和css文件
<!-- DataTables CSS -->
<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="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8"
src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
2、添加HTML代码
table标签中thead、tbody必须存在
<table id="table_id_example" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
3、初始化Datatables
$(document).ready( function () {
$('#table_id_example').DataTable();
} );
4、效果
三、常用选项
order
应用于表的初始顺序（排序） stateSave
# 参数1 列索引按顺序排列 从0开始
# 参数2 排序的规则
"order": [[ 1, "asc/desc" ],...]
stateSave
状态保存 - 页面重新加载时恢复表状态 启用或禁用状态保存。启用后，DataTables将存储状态信息，例如分 页位置，显示长度，过滤和排序。当最终用户重新加载页面时，表的状态将被更改以匹配他们之前设置的状 态。
# 默认值 false
stateSave: true/false
columnDefs
设置列定义初始化属性 此参数允许您为表中的列指定特定选项，但在这种情况下，定义的列选项可应用于一 个或多个列
"columnDefs":[
//索引第4列，不进行排序
{targets:[4],orderable:false}
]
lengthMenu
定义在每页显示记录数的select中显示的选项
$('#example').DataTable({
"lengthMenu": [ 10, 25, 50, 75, 100 ]
});
# 或
$('#example').DataTable({
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "所有"] ]
});
paging
是否允许表格分页 true/false
默认：true
searching
是否允许Datatables开启本地搜索 true/false
默认：true
ordering
是否允许Datatables开启排序 true/false
默认：true
processing
是否显示正在处理的状态 true/false
默认：false
四、Ajax使用远程数据
有时从DOM读取数据太慢或太笨重，特别是在处理数千或数百万个数据行时。为了解决这个问题， DataTables的服务器端处理功能提供了一种方法，可以让服务器端的数据库引擎完成所有“繁重的工作” 。
当使用服务器端处理时，DataTables将在页面上每次绘制信息时向服务器发出Ajax请求（即，在分页，排 序，搜索等时）。DataTables将向服务器发送许多变量，以允许它执行所需的处理，然后以DataTables所需 的格式返回数据。
1、客户端
$('#example').DataTable( {
// 开启服务器模式
serverSide: true,
// ajax发起请求
ajax: {
// 请求地址
url: '/data-source',
// 请求方式 get/post
type: 'get',
// 头信信息 laravel post请求时 csrf
//headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' },
// 请求的参数
/*
data: {
"user_id": 451
},
*/
/*
// 两者写法效果一致 但是它用于搜索
data: function ( d ) {
d.user_id = $('#user_id').val();
}
*/
},
// columns要对tr中的td单元格中的内容进行数据填充
// 注意：如果data接收类似a或b的信息，实际服务器没有返回该信息，那么一定要同时设置
//defaultContent属性，否则报错
columns: [
// 总的数量与表格的列的数量一致，不多也不少
// 字段名称与sql查询出来的字段时要保持一致，就是服务器返回数据对应的字段名称
// defaultContent 和 className 可选参数
{'data':'字段名称1',"defaultContent": "默认值",'className':'类名'},
{'data':'字段名称n',"defaultContent": "默认值",'className':'类名'}
],
/*
创建tr/td时的回调函数，可以继续修改、优化tr/td的显示，里边有遍历效果，会依次扫描生成的每个tr
row:创建好的tr的dom对象
data:数据源，代表服务器端返回的每条记录的实体信息
dataIndex:数据源的索引号码
*/
createdRow:function(row,data,dataIndex){}
} );
2、服务端
/*
draw: 客户端调用服务器端次数标识
recordsTotal: 获取数据记录总条数
recordsFiltered: 数据过滤后的总数量
data: 获得的具体数据
注意：recordsTotal和recordsFiltered都设置为记录的总条数
*/
$result = [
'draw' => $request->get('draw'),
'recordsTotal' => $count,
'recordsFiltered' => $count,
'data' => $data
];
return json_encode($result);
3、搜索
var table = $('#example').DataTable( {
ajax: "data.json"
} );
$('#search').on('click',function(){
table.api().ajax.reload();
});
4、实例
以laravel为例
服务器
public function index(Request $request){
if ($request->ajax()){
//排序索引
$orderArr = $request->get('order')[0];
//排序索引
$column = $orderArr['column'];
//排序方式
$dir = $orderArr['dir'];
//排序字段
$orderColumn = $request->get('columns')[$column]['data'];
//开启位置
$start = $request->get('start',0);
//搜索关键字
$title = $request->get('title');
$query=Article::where('id','>',0);
if (!empty($title)){
$query->where('title','like',"%$title%");
}
//获取记录数
$length = min(100,$request->get('length',10));
$count = $query->count();
$articles = $query->orderBy($orderColumn,$dir)->offset($start)->limit($length)->get()->toArray();
/**
* draw:客户端调用服务端标识
* recordsTotal：获取数据记录总条数
* recordsFiltered：数据过滤后的总数量
* data：获取具体的数据
*/
return [
'draw' => $request->get('draw'),
'recordsTotal' => $count,
'recordsFiltered'=>$count,
'data'=>$articles
];
}
return view('admin.article.index');
}
blade模板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"
href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
</head>
<body>
<form onsubmit="return search()">
<input type="text" name="title" id="title" placeholder="请输入搜索关键字">
<input type="submit" value="搜索">
</form>
<div class="page-container">
<table class="table table-border table-bordered table-bg table-sort">
<thead>
<tr>
<th scope="col" colspan="7">文章列表</th>
</tr>
<tr class="text-c">
<th>ID</th>
<th>文章标题</th>
<th>创建时间</th>
<th>更新时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script type="text/javascript">
var table = $('.table-sort').DataTable({
"order": [[ 0, "desc" ]],
"columnDefs":[
{targets:[4],orderable:false}
],
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "所有"] ],
"processing" : true,
serverSide: true,
ajax: {
url: '',
type: 'get',
data:function (ret) {
ret.title = $('#title').val()
}
},
columns: [
{'data':'id'},
{'data':'title'},
{'data':'created_at'},
{'data':'updated_at'},
{'data':'updated_at'}
],
createdRow:function(row,data,dataIndex){
var id = data.id;
var td = $(row).find('td:last-child');
var html = `<a>编辑</a>
<a >删除</a>`;
td.html(html)
}
});
function search(){
table.ajax.reload();
return false;
}
</script>
</html>
