前端插件之Datatables使用–上篇
- 2019 年 10 月 3 日
- 筆記
工欲善其事，必先利其器
本系列文章介紹我在運維繫統開發過程中用到的那些順手的前端插件，前邊兩篇分別介紹了Duallistbox插件和Select2插件的使用，這一篇開始Databases的征服之旅
Databases是一款基於JQuery的表格插件，主要用來優化table，支援表格分頁、搜索、排序、顯示條數、非同步載入等眾多好用的功能
基本使用
需要用到的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的內容較多，且使用廣泛，更高級的用法會在下篇文章中說明，例如數據非同步載入，添加編輯、刪除按鈕，調整頁面功能顯示等
相關文章推薦閱讀：
