前端外掛之Datatables使用--上篇
工欲善其事，必先利其器
本系列文章介紹我在運維繫統開發過程中用到的那些順手的前端外掛，前邊兩篇分別介紹了Duallistbox外掛和Select2外掛的使用，這一篇開始Databases的征服之旅
Databases是一款基於JQuery的表格外掛，主要用來優化table，支援表格分頁、搜尋、排序、顯示條數、非同步載入等眾多好用的功能
專案地址：https://datatables.net/
基本使用
需要用到的JS和CSS檔案位於專案程式碼下的media目錄中，需要將這個目錄中的對應檔案放入你的專案裡，這一步不贅述
- 引入CSS/JS檔案，由於Datatables是基於Jquery的，所以要先引入Jquery，這裡我們都直接引入CDN的地址
<!-- 載入 Jquery --> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <!-- 載入 Datatables --> <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" /> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
- 初始化Datatables
<table id="myTable" class="display" 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>Ops Coffee</td> <td>System Architect</td> <td>Edinburgh</td> <td>18</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <!-- 中間省略一些tr資料 --> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table> $(document).ready( function () { $('#myTable').DataTable(); });
- 完成以上兩步可以看到頁面效果如下
功能開啟/關閉
預設介面下除了原始的table外，還為table額外增加了搜尋、列排序、分頁及資訊顯示這些內容，如果不需要其中一個或多個可以通過以下設定隱藏
$('#myTable').DataTable({
"paging": false,
"ordering": false,
"info": false,
"searching": false,
});paging： 控制分頁是否開啟，預設開啟，開啟後會顯示錶格左上角的每頁行數選擇和右下角的頁碼跳轉
ordering： 控制是否進行排序，預設開啟，且預設會對第一列資料進行排序
info： 控制是否顯示錶格左下角的資訊，預設開啟
searching： 控制是否顯示錶格右上角的搜尋，預設開啟
排序配置
單列排序
可以通過order來設定初始排序的列以及排序方向
"order": [[ 3, "desc" ]],列號預設從0開始算起，這裡的3實際上對應的是第4列，這點要注意，以下所有用到列號的地方都是從0開始
注意：開啟stateSave之後會導致columnDefs失效，兩個引數儘量不要同時設定
多列排序
當然也可以在order裡邊配置同時按多列排序
"order": [[ 3, "desc" ], [ 0, "desc" ]],如上配置的意思是先按照3列進行排序，如果3列相同，則再按照0列進行排序
隱藏列
可以通過columnDefs來設定列屬性
"columnDefs": [
{
"targets": [ 2 ],
"visible": false,
"searchable": false
},
{
"targets": [ 3 ],
"visible": false,
}
]targets： 指定列
visible： 是否可顯示
searchable： 是否可搜尋，當僅設定visable為false，但searchable不設定時這一列仍然可以被搜尋
注意：開啟stateSave之後會導致columnDefs失效，兩個引數儘量不要同時設定
語言配置
預設提示語都是英文，可以通過language來設定為中文
"language": {
"decimal": "",
"emptyTable": "表中資料為空",
"info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
"infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
"infoFiltered": "(由 _MAX_ 項結果過濾)",
"InfoPostFix": "",
"thousands": ",",
"lengthMenu": "顯示 _MENU_ 項結果",
"loadingRecords": "載入中...",
"processing": "處理中...",
"search": "搜尋:",
"zeroRecords": "沒有匹配結果",
"Paginate": {
"sFirst": "首頁",
"sPrevious": "上一頁",
"sNext": "下一頁",
"sLast": "尾頁"
},
"Aria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}狀態保持
可以通過stateSave來設定是否保持狀態，stateSave會呼叫HTML5的localStorage和sessionStorageAPIs將頁面狀態資料儲存在瀏覽器本地，當你重新整理頁面時會自動載入這些狀態資訊，這些狀態可以是你的排序資訊、當前頁碼以及已輸入的搜尋資料等
"stateSave": true,分頁型別
可以通過pagingType來設定分頁型別
"pagingType": "simple_numbers",simple_numbers： 型別會顯示上一頁、下一頁按鈕和頁碼，這也是預設的分頁型別
其他幾種分頁型別如下：
numbers： 僅顯示頁碼
simple： 僅顯示上一頁、下一頁按鈕
full： 僅顯示首頁、尾頁、上一頁和下一頁按鈕
full_numbers： 顯示首頁、尾頁、上一頁、下一頁按鈕和頁碼
first_last_numbers： 顯示首頁、尾頁按鈕和頁碼
滾動配置
當table的寬、高超過頁面設定大小時，可以通過以下配置來新增滾動條
"scrollX": "true",
"scrollY": "200px",
"scrollCollapse": true,scrollX： 允許水平滾動條
scrollY： 設定垂直body的高度，當超過這個這個高度時出現垂直滾動條
scrollCollapse： 設定當資料佔用高度小於scrollY設定的高度時自動收縮body高度
完整Demo
為了方便大家學習，我寫了個完整的demo，你可以線上檢視效果或下載程式碼應用到自己的專案中
線上Demo地址：https://demo.ops-coffee.cn/datatables/
Github原始碼地址：https://github.com/ops-coffee/demo/tree/master/datatables
其他說明
由於Datatables的內容較多，且使用廣泛，更高階的用法會在下篇文章中說明，例如資料非同步載入，新增編輯、刪除按鈕，調整頁面功能顯示等
相關文章推薦閱讀：
- 前端外掛之Select2使用
- 前端外掛之Bootstrap Dual Listbox使用