前端控件JQuery Datatables使用——常用功能初始化
本文用于自己記錄，忘記時可以用來回顧。點擊這里進入JQuerydatatable官網API地址
?JQuery Datatables初始化
個人比較喜歡JQueryDatatables的Bootstrap4風格，所以文章以Bootstrap4風格為例。
JQueryDatatable的初始化很簡單，按照官網的舉例說明，只要如下幾個JS和CSS文件即可：
1、jquery-3.3.1.min.js，當然高版本的JS也是可以的
2、jquery.dataTables.min.js
3、dataTables.bootstrap4.min.js
4、bootstrap.min.css
5、dataTables.bootstrap4.min.css
注意：JS文件的引用順序很重要，JQuery必須放在第一位，然后dataTables.min.js是第二位，JQuery不能重復引用
既然使用了bootstrap.min.css，那我加入了bootstrap.min.js了，就用Bootstrap框架。忽略文件路徑，代碼如下圖所示：
<script src="~/Scripts/jquery-3.4.1.min.js"></script> <script src="~/Scripts/datatables/jquery.dataTables.min.js"></script> <script src="~/Scripts/datatables/dataTables.bootstrap4.min.js"></script> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <link href="~/Scripts/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" /> <script src="~/Scripts/bootstrap.min.js"></script>?再加入官網復制來的HTML代碼(因為太長，所以這里只列舉了一部分)，如下圖所示：
<table id="example" class="table table-striped table-bordered" style="white-space: nowrap;width:100%;cursor:pointer" cellspacing="0"><thead><tr><th></th><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Salary</th></tr></thead><tbody><tr><td></td><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>$320,800</td></tr>.............</tbody></table>再加入一段基本的JS代碼，如下圖所示：
<script type="text/javascript">var dtsLanguage = "/Scripts/datatables/datatables_zh-cn.txt"var mytable;$(document).ready(function () {mytable = $('#example').DataTable({pagingType: "full_numbers",language: {url: dtsLanguage}});mytable.on('order.dt search.dt', function () {mytable.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {cell.innerHTML = i + 1;});}).draw();}); </script>變量dtsLanguage存放了一個配置文件地址，配置文件用于更換默認英文的語言配置為中文配置，配置文件的內容如下：
{"buttons": {"pageLength": "顯示 %d 行","excel":"<i class='fa fa-file-excel-o'></i> 導出Excel"},"decimal": "","emptyTable": "表中數據為空","info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項","infoEmpty": "顯示第 0 至 0 項結果，共 0 項","infoFiltered": "(由 _MAX_ 項結果過濾)","InfoPostFix": "","thousands": ",","lengthMenu": "顯示 _MENU_ 項結果","loadingRecords": "載入中...","processing": "處理中...","search": "搜索:","zeroRecords": "沒有匹配結果","oPaginate": {"sFirst": "首頁","sPrevious": "上一頁","sNext": "下一頁","sLast": "尾頁"},"Aria": {"sSortAscending": ": 以升序排列此列","sSortDescending": ": 以降序排列此列"} }pagingType屬性是分頁類型，用“full_numbers”就可以了，?顯示首頁，尾頁，上一頁，下一頁，當前頁，默認用這個就可以了。
?
以下這段JS代碼的目的是顯示行號，非必須。具體說明參考官方說明：datatables行號實現
mytable.on('order.dt search.dt', function () {mytable.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {cell.innerHTML = i + 1;});}).draw();完成上述代碼后，就可以看到初步樣子了，如下圖所示：
擴展功能之Buttons?
JQuery datatables自帶一些常用的功能按鈕，比如導出EXCEL等。也支持自定義按鈕。具體API參考官網Button相關介紹
默認的按鈕樣式在datatable初始化的JS和CSS基礎上再加兩個JS和CSS文件即可：
1、dataTables.buttons.min.js
2、buttons.dataTables.min.css
注意：datatable.buttons.min.js必須放在第一位。
因為要跟初始化一樣的風格，所以在再引用Bootstrap4風格的JS和CSS文件：
3、buttons.bootstrap4.min.js
4、buttons.bootstrap4.min.css
忽略文件引用路徑，代碼如下圖所示：
@*基礎buttons相關*@ <script src="~/Scripts/buttons/dataTables.buttons.min.js"></script> <script src="~/Scripts/buttons/buttons.bootstrap4.min.js"></script> <link href="~/Scripts/buttons/buttons.bootstrap4.min.css" rel="stylesheet" /> <link href="~/Scripts/buttons/buttons.dataTables.min.css" rel="stylesheet" />可見列
支持手動選擇表格中哪些列是顯示的，哪些列是不可顯示的。
引用的JS文件如下圖所示：
5、buttons.colVis.min.js
?
打印
支持用瀏覽器端直接打印頁面功能。
引用的JS文件如下圖所示：
6、buttons.print.min.js
?
復制
支持復制表格中的數據功能。
引用JS文件如下圖所示：
7、buttons.html5.min.js
?
導出PDF
支持導出PDF功能。
引用JS文件如下圖所示：
8、pdfmake.min.js
9、vfs_fonts.js
?
導出EXCEL功能
支持導出Excel功能。
引用JS文件如下圖所示：
10、jszip.min.js
?
自定義按鈕
支持自定義功能按鈕。引入基礎Buttons的JS和CSS即可。
?
所有JS引用如下圖所示：
@*基礎buttons相關*@ <script src="~/Scripts/buttons/dataTables.buttons.min.js"></script> <script src="~/Scripts/buttons/buttons.bootstrap4.min.js"></script> <link href="~/Scripts/buttons/buttons.bootstrap4.min.css" rel="stylesheet" /> <link href="~/Scripts/buttons/buttons.dataTables.min.css" rel="stylesheet" />@*復制相關*@ <script src="~/Scripts/buttons/buttons.html5.min.js"></script> @*excel導出相關*@ <script src="~/Scripts/buttons/jszip.min.js"></script> @*打印相關*@ <script src="~/Scripts/buttons/buttons.print.min.js"></script> @*可見列相關*@ <script src="~/Scripts/buttons/buttons.colVis.min.js"></script> @*導出PDF相關*@ <script src="~/Scripts/buttons/pdfmake.min.js"></script> <script src="~/Scripts/buttons/vfs_fonts.js"></script>將datables相關的JS代碼修改下，如下圖所示：
mytable = $('#example').DataTable({dom: 'Bfrtip',lengthChange: false,pagingType: "full_numbers",buttons: ['pageLength','colvis','copy','print','pdf','excel',{text: "自定義按鈕一",className: "btn",action: function (e, table, node, config) {}},],language: {url: dtsLanguage}});此時再次運行程序如下圖所示：
?
?
擴展功能之Select?
到目前為止表格中任意行是不能被選中點亮的。也無法觸發任何點擊事件。擴展功能Select提供對這個操作的支持。具體API參考官網Select介紹
默認選中樣式只要引用兩個JS和CSS文件就可以了：
?1、dataTables.select.min.js
?2、select.dataTables.min.css
因為要用Booststrap4風格，就必須再引用一個CSS文件：
3、select.bootstrap4.min.css
?
忽略文件引用路徑，如下圖所示：
@*select相關*@ <script src="~/Scripts/select/dataTables.select.min.js"></script> <link href="~/Scripts/select/select.dataTables.min.css" rel="stylesheet" /> <link href="~/Scripts/select/select.bootstrap4.min.css" rel="stylesheet" />?
select的初始化很簡單，只需要加一句代碼就可以了：select：true。修改datatable相關的JS代碼如下圖所示：
mytable = $('#example').DataTable({dom: 'Bfrtip',select:true,pagingType: "full_numbers",buttons: ['pageLength','colvis','copy','print','pdf','excel',{text: "自定義按鈕一",className: "btn",action: function (e, table, node, config) {}},],language: {url: dtsLanguage}});這時運行程序，效果如下圖所示：
如需要多行選擇，修改代碼如下圖所示：
select: {style: 'multi'},運行效果如下圖所示：
?
如果需要在把第一列變成選擇框，可以修改代碼如下圖所示：
mytable = $('#example').DataTable({dom: 'Bfrtip',columnDefs: [{orderable: false,className: 'select-checkbox',targets: 0}],select: {style: 'multi',selector: 'td:first-child'},pagingType: "full_numbers",buttons: ['pageLength','colvis','copy','print','pdf','excel',{text: "自定義按鈕一",className: "btn",action: function (e, table, node, config) {}},],language: {url: dtsLanguage}});使用效果如下圖所示：
配置select的中文提示：在配置文件中修改關于select的提示，此時配置文件中的內容如下圖所示：
? ? ? ? ? ? ? ? ? ? ? ? ?
?
再次運行可以看到，已經變成中文提示：
?
表格全選和全部取消?
select提供跟button先關的全選和全部取消功能，修改datatable相關的JS代碼如下：
mytable = $('#example').DataTable({dom: 'Bfrtip',columnDefs: [{orderable: false,className: 'select-checkbox',targets: 0}],select: {style: 'multi',selector: 'td:first-child'},pagingType: "full_numbers",buttons: ['pageLength','colvis','copy','print','pdf','excel',{text: "自定義按鈕一",className: "btn",action: function (e, table, node, config) {}},'selectAll',//全選'selectNone',//全部取消],language: {url: dtsLanguage}});運行效果如下圖所示：
?
擴展功能之ColReorder
datatables可以手動對列進行移動排序。具體API請查看官網對ColReorder的介紹
Bootstrap風格的ColReorder樣式只需要引用兩個JS和CSS文件就可以了：
1、dataTables.colReorder.min.js
2、colReorder.bootstrap4.min.css
忽略文件引用路徑，如下圖所示：
@*ColReorder相關*@ <script src="~/Scripts/ColReorder/dataTables.colReorder.min.js"></script> <link href="~/Scripts/ColReorder/colReorder.bootstrap4.min.css" rel="stylesheet" />ColReorder的初始化也很簡單，只要加一句代碼就可以了：colReorder: true 。
修改datatables相關的JS代碼如下圖所示：
mytable = $('#example').DataTable({dom: 'Bfrtip',colReorder: true,//初始化ColReordercolumnDefs: [{orderable: false,className: 'select-checkbox',targets: 0}],select: {style: 'multi',selector: 'td:first-child'},pagingType: "full_numbers",buttons: ['pageLength','colvis','copy','print','pdf','excel',{text: "自定義按鈕一",className: "btn",action: function (e, table, node, config) {}},'selectAll','selectNone',],language: {url: dtsLanguage}});此刻便可以用鼠標點擊拖動任何一列到任何位置：
拖動后的效果：?
?
擴展功能之FixedColumns?
?datatables提供對固定列的支持。具體API參考官網對fixedcolumns詳細說明
Bootstrap風格的FixedColumns只需要引用兩個JS和CSS文件即可：
1、dataTables.fixedColumns.min.js
2、fixedColumns.bootstrap4.min.css?
忽略文件路徑，如下圖所示：
@*fixdeCol*@ <script src="~/Scripts/fixedcol/dataTables.fixedColumns.min.js"></script> <link href="~/Scripts/fixedcol/fixedColumns.bootstrap4.min.css" rel="stylesheet" />?
FixedColumns的初始化也是很多簡單的，只需要一句代碼即可，fixedColumns: true?
修改datatable的JS代碼如下，這里為了顯示固定效果將datatable的長和寬縮小了，并去掉了Select相關功能，從目前的結果來看，select 和 fixedColumns有一定程度上的不兼容。
mytable = $('#example').DataTable({dom: 'Bfrtip',colReorder: true,scrollY: "300px",scrollX: true,scrollCollapse: true,fixedColumns: true,pagingType: "full_numbers",buttons: ['pageLength','colvis','copy','print','pdf','excel',{text: "自定義按鈕一",className: "btn",action: function (e, table, node, config) {}},'selectAll','selectNone',],language: {url: dtsLanguage}});運行效果如下圖所示,，可以看到第一列已經固定了：
? ? ? ? ? ? ? ? ? ? ? ? ???
?
本文將會持續更新。。。。。?
?
?
?
?
?
?
?
?
總結
以上是生活随笔為你收集整理的前端控件JQuery Datatables使用——常用功能初始化的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学习antd-design-pro
- 下一篇： 浏览器生成信息