前端插件之Datatables使用--上篇

工欲善其事，必先利其器

本系列文章介紹我在運維繫統開發過程當中用到的那些順手的前端插件，前邊兩篇分別介紹了Duallistbox插件和Select2插件的使用，這一篇開始Databases的征服之旅

Databases是一款基於JQuery的表格插件，主要用來優化table，支持表格分頁、搜索、排序、顯示條數、異步加載等衆多好用的功能

項目地址：https://datatables.net/

基本使用

須要用到的JS和CSS文件位於項目代碼下的media目錄中，須要將這個目錄中的對應文件放入你的項目裏，這一步不贅述

1. 引入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>

1. 初始化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();
});

1. 完成以上兩步能夠看到頁面效果以下

功能開啓/關閉

默認界面下除了原始的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使用