https://www.hangge.com/blog/cache/detail_1978.html
一、基本介绍
1，什么是DataTables？
Datatables 是一款开源的 jQuery 表格插件。它具有高度灵活的特性，可以对任何 HTML 表格添加高级的交互功能。
2，功能特点
- 自带分页，即时搜索和排序功能
- 几乎支持任何数据源，比如：DOM、javascript、Ajax 和 服务器处理
- 支持不同主题：DataTables、jQuery UI、Bootstrap、Foundation
- 支持各种扩展，包括编辑器, 表格工具, 固定列等等
- 丰富多样的选项配置和强大的 API
- 支持国际化
- 超过 2900+ 个单元测试
- 免费开源（MIT license）
3，安装配置
DataTables 配置很简单，只需要引入两个文件：DataTables 本身的脚本文件以及它的 css 样式文件。（当然作为 jQuery 插件，也别忘了引入 jQuery）。
|
1
2
3
|
<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
<link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" />
|
二、使用 DOM 元素作为表格数据
1，样例代码
这里我们直接调用 table 的 DataTable() 方法即可初始化表格。
注意：由于没有指定 data、ajax 选项，DataTable 会将该 table 的 html 标签上内容转换成对应的数据（Array 数据形式）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
<link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$('#myTable').DataTable();
});
</script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>出生日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>011</td>
<td>张三</td>
<td>2011-11-23</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>2001-11-23</td>
</tr>
<tr>
<td>003</td>
<td>刘士元</td>
<td>2021-08-21</td>
</tr>
<tr>
<td>004</td>
<td>李波斯</td>
<td>2011-11-03</td>
</tr>
<tr>
<td>005</td>
<td>赵军</td>
<td>2002-01-01</td>
</tr>
<tr>
<td>006</td>
<td>李子明</td>
<td>2006-08-21</td>
</tr>
<tr>
<td>007</td>
<td>李小明</td>
<td>2011-04-13</td>
</tr>
<tr>
<td>008</td>
<td>李大明</td>
<td>2010-10-20</td>
</tr>
<tr>
<td>009</td>
<td>周生生</td>
<td>2011-01-01</td>
</tr>
<tr>
<td>010</td>
<td>唐不甜</td>
<td>2008-08-04</td>
</tr>
<tr>
<td>001</td>
<td>马成功</td>
<td>2001-06-05</td>
</tr>
</tbody>
</table>
</body>
</html>
|
2，效果图
可看到表格自动添加了一些简单样式，且数据被自动分页。同时表格上下方会自动生成一些操作按钮：
- 左上方的下拉框可以选择每页显示的数量。
- 右上方可输入内容进行数据的实时筛选。
- 点击列头可以按该列数据进行排序（默认是按第一列数据升序排列）
- 表格下方则是页脚信息，以及翻页按钮。
三、使用 JS 设置表格数据
我们还可以通过 data 配置来指定数据源。
1，条目数据类型为数组的情况
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
<link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
var data = [
[
"011",
"张三",
"2011-11-23"
],
[
"002",
"李四",
"2001-11-23"
],
[
"003",
"刘士元",
"2021-08-21"
]
];
$('#myTable').DataTable({
data: data
});
});
</script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>出生日期</th>
</tr>
</thead>
</table>
</body>
</html>
|
2，条目为对象的情况
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
var data = [
{
"id": "001",
"name": "张三",
"birthday": "2015-12-31"
},
{
"id": "002",
"name": "李四",
"birthday": "2001-11-31"
},
{
"id": "003",
"name": "王五",
"birthday": "2011-12-31"
}
];
$('#myTable').dataTable({
data: data,
columns: [
{ data: 'id'},
{ data: 'name'},
{ data: 'birthday'}
]
});
|
3，条目为自定义实例的情况
这个本质和上面是一样的
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function User(id, name, birthday) {
this.id = id;
this.name = name;
this.birthday = birthday;
};
$('#myTable').dataTable({
data: [
new User("001", "张三", "2014-01-21"),
new User("002", "李四", "2001-01-21"),
new User("003", "王五", "2013-01-21")
],
columns: [
{ data: 'id'},
{ data: 'name'},
{ data: 'birthday'}
]
});
|
附：刷新数据（重新加载数据）
如果想要手动重新设置全部数据，可以先清空表格，再重新设置。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//需要设置的新数据
var newData = [
[
"110",
"余得水",
"2000-11-23"
],
[
"111",
"曹得旺",
"2001-11-23"
],
];
//重新设置数据
var table = $('#myTable').DataTable();
table.clear();
table.rows.add(newData).draw();
|
原文出自：www.hangge.com 转载请保留原文链接：https://www.hangge.com/blog/cache/detail_1978.html
