Datatable是基于Jquery的一個非常好用的用來展示數(shù)據(jù)表格的插件杉畜。下面來介紹一下一般的使用方法。
在辛老師的視頻蹭秋，我們曾經(jīng)接觸過datatable扰付，不過當時我們是直接復制其樣式來將它加入我們的網(wǎng)頁。但是這樣的方法和datatable的實際生成相差太多仁讨。許多人的項目都需要datatable來進行數(shù)據(jù)的展示羽莺，但是似乎對datatable一般的用法并不了解，而且也不知道它的功能洞豁，而它的能力實際上比我們之前所了解的要強得多盐固。所以我打算以這個為題目來寫一篇文章（我不打算教難一點的用法，這樣子容易讓大家感到迷惑丈挟，而且也和我一開始的想法不符）刁卜，下面是目錄：
?
1.從零開始構建最簡單的datatable
??1.1 下載
??1.2 構建最簡單的datatable
??1.3 其他方法進行對datatable的數(shù)據(jù)傳入
2.給datatable增加按鈕
??2.1 導出、打印按鈕
??2.2 表內(nèi)按鈕
至少需要下載vscode并安裝live server插件來打開html文件曙咽，以便于更好地學習該文章
?
?
?
?
1.從零開始構建datatable
??在這里蛔趴，我會從零開始構建一個datatable，想要學習的同學跟著做就可以了例朱。（所有的文件都會放到一個鏈接里面孝情，大家自行下載即可）
?1.1 下載
首先進入datatable的官網(wǎng) https://datatables.net/download/
接下來如圖所示進行勾選之拨，可以進行
datatable擁有非常多的組件，我們的教學中只需要用到一部分咧叭，所以我們不需要全部打勾
如果不想下載的蚀乔，可以使用這里的百度網(wǎng)盤，里面有一個簡單構建的案例菲茬。
鏈接：https://pan.baidu.com/s/1_ISp_N3mAHvkLA9vA10gVA 提取碼：p9k8
1.2 構建最簡單的datatable
?首先吉挣，許多同學以前并沒有接觸過前端的經(jīng)驗，所以不知道許多復雜的表現(xiàn)形式（比如說游戲婉弹、還有就是datatbale這樣的表格）睬魂，都已經(jīng)被開發(fā)者進行封裝好了。我們調(diào)用的人镀赌，往往只需要一個標簽和一行JS代碼就可以對該標簽進行渲染氯哮。我們這個datatable也是這個樣子。下面是構建一個最簡單的datatable的過程
創(chuàng)建一個html文件商佛，寫下以下內(nèi)容（文件的結(jié)構就不講了喉钢，可以下載代碼進行理解）
index1.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<!-- 引入文件 -->
<script src="./src/jquery.min.js"></script>
<link rel="stylesheet" href="./src/datatables.css">
<script src="./src/datatables.js"></script>
<script>
//在頁面加載完成后渲染datatable
//example是table標簽的名字，datatable是基于table標簽的
$(document).ready(function() {
$('#example').DataTable({});
} );
</script>
<body>
<table id="example" class="display cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
...
...
<!-- 代碼過長良姆，省略了表格內(nèi)容肠虽，完整代碼請直接下載 -->
</tfoot>
</table>
</body>
</html>
</head>
<script>
在打開html文件后，就可以看到如下datatable玛追∷翱危可以看到，生成的最簡單的datatable有全局查找痊剖、按某一列排序韩玩、分頁等功能，能夠極大地加快我們開發(fā)的效率陆馁。
1.3 其他方法進行對datatable的數(shù)據(jù)傳入
??在1.2中找颓，我們使用的是直接在html文件中填入數(shù)據(jù)的方法，這是一種靜態(tài)的形式氮惯，肯定是不能滿足我們?nèi)粘＞W(wǎng)頁構建中的需要的叮雳。datatable也定義了別的方式去導入數(shù)據(jù)。這里單單介紹使用ajax來導入妇汗。（該方法需要在服務下才能使用帘不，最簡單的辦法是在vscode中安裝Live Server插件后使用Open with Live Server選項使用）
index2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./src/jquery.min.js"></script>
<link rel="stylesheet" href="./src/datatables.css">
<script src="./src/datatables.js"></script>
</head>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
</script>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</body>
</html>
data.txt:
{
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
},
{
"id": "3",
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009/01/12",
"office": "San Francisco",
"extn": "1562"
},
......
]
}
??可以看到，相比之前的代碼杨箭，這里的初始化代碼中多了"ajax"和"columns"兩行
??ajax代表使用ajax來請求數(shù)據(jù)寞焙，代碼中僅僅寫了一個data文件，在實際運用當中就可以寫對應的數(shù)據(jù)接口（其給出的數(shù)據(jù)應該與data.txt的格式保持一致）
??columns代表我們對datatable中每一列的設置。這里僅僅設置了每一列的內(nèi)容所對應的對象中的鍵的名稱捣郊，也就是說我們可以隨意更改每一列所展示的內(nèi)容辽狈。
??數(shù)據(jù)的格式不僅僅是json一種，也可以是更簡單的列表格式呛牲，這方面就不再介紹刮萌。
2.給datatable增加按鈕
??僅僅是上面講的內(nèi)容，并不能滿足更加復雜的需求娘扩，所以datatable又有了更多的組件着茸，其中比較重要的就是按鈕
??我們在WEB制表的過程中，經(jīng)常會有對表格進行打印琐旁、導出為PDF涮阔、EXCEL等的需求，datatable的按鈕拓展就可以幫我們實現(xiàn)這方面的需求
index3.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入文件 -->
<script src="./src/jquery.min.js"></script>
<link rel="stylesheet" href="./src/datatables.css">
<script src="./src/datatables.js"></script>
</head>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"dom": 'Bfrtip',
"ajax": "data.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
],
buttons: [
'excel','pdf','copy',
],
} );
} );
</script>
<body>
<table id="example" class="display cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</body>
</html>
??我們可以發(fā)現(xiàn)和之前的相比灰殴，在datatable的代碼中多了兩行數(shù)據(jù)敬特，分別是 dom 和 buttons，dom表示在datatable四周的控件分布牺陶，如果不在最前面加一個B伟阔，那么按鈕就不會出現(xiàn)。而buttons就確定了會有哪些button出現(xiàn)在datatable旁邊义图。
??我這篇文章减俏，只能說是給完全不懂datatbale甚至不怎么懂前端的同學做的一個實際操作說明召烂。
想要學會更多碱工，請查看datatable中文網(wǎng)。 http://datatables.club/
