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
