JS 插件文檔庫邀你一起協(xié)同創(chuàng)作 - 簡(jiǎn)書
Datatables
這是我見過最強(qiáng)大的在線表格插件了，官方文檔也比較完整，建議直接看英文版本，初次看可能會(huì)有點(diǎn)邏輯混亂踱蛀，但是多看看，每次都有一些收獲贵白。這里我還是通過示例的方式率拒，來介紹一下數(shù)據(jù)獲取以及參數(shù)傳遞的方式。
1. 準(zhǔn)備
相比Bootstrap-Table禁荒，Datatables的前臺(tái)頁面中需要定義表格的表頭猬膨，否則將無法顯示，代碼如下：
<table id="table" class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Item name</th>
<th>Item price</th>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>操作</th>
</tr>
</thead>
</table>
在前后各多出一列，后面會(huì)介紹它的用處勃痴。表頭定義好后谒所，接下來就是引入庫文件了，1個(gè)css文件沛申，2個(gè)js文件劣领。如下：
<!-- DataTables css -->
<link rel="stylesheet" href="/datatables.net-bs/css/dataTables.bootstrap.min.css">
<!-- DataTables js-->
<script src="/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
js文件依然還是放到最底下，</body>之前即可铁材，引入正確的庫文件之后尖淘，準(zhǔn)備工作就OK了。
2. 初步使用
Datatables提供了4種獲取表格數(shù)據(jù)的方式著觉，這里只介紹：通過Ajax異步獲取的方式村生。數(shù)據(jù)格式依然還是包含數(shù)據(jù)對(duì)象的數(shù)組，而且跟之前是同一組數(shù)據(jù)饼丘，看下初步效果：
同樣的配方趁桃，不一樣的味道，js中代碼實(shí)現(xiàn)如下：
$('#table').DataTable({
ajax: {
url: '/json/data.json',
dataSrc: ''
},
columns: [
{ "data": null , defaultContent: '' },
{ "data": "id" },
{ "data": "name"},
{ "data": "price"},
{ "data": "column1" },
{ 'data': "column2" },
{ "data": "column3" },
{ "data": "column4" },
{ "data": null , defaultContent: ''}
]
});
這里需要注意的是：
-
columns參數(shù)中數(shù)組的對(duì)象數(shù)量肄鸽，一定要跟前臺(tái)表格中th保持一致卫病，否則無法渲染出來。 - 由于示例中贴捡，返回的是包含對(duì)象的數(shù)組類型，于是需要設(shè)置dataSrc為空村砂，否則也無法得到數(shù)據(jù)烂斋。
Datatables提供多種返回?cái)?shù)據(jù)格式，具體參照這里Ajax sourced data
3. 功能介紹
由于Datatables的功能實(shí)在太多了础废，這里也不可能全部介紹到汛骂，根據(jù)實(shí)際項(xiàng)目經(jīng)驗(yàn)，主要介紹一些比較實(shí)用评腺，或者跟Bootstrap-Table有差異性的一些功能點(diǎn)帘瞭。
（1）操作區(qū)
還記得上面表格頁面預(yù)留的兩列吧，想必你也猜出來了蒿讥，最右邊的那列蝶念，就是用來放操作按鈕的，我們添加一個(gè)表格參數(shù)columnDefs用來定義列芋绸。
columnDefs: [
{
targets: -1,
visible: false,
sortable: false,
render: function(data, type, row){
return '<a href="#" title="詳情">' +
'<i class="glyphicon glyphicon-eye-open"></i> ' +
'</a>'+
'<a href="#editProject" data-toggle="modal" data-id="' + row.p_id +'" title="修改">' +
'<i class="glyphicon glyphicon-pencil"></i> ' +
'</a>'+
'<a href="#delProject" data-toggle="modal" data-id="' + row.p_id +'" title="刪除">' +
'<i class="glyphicon glyphicon-trash text-danger"></i> ' +
'</a>';
}
}
],
targets選擇目標(biāo)列媒殉，-1代表倒數(shù)第1列，render渲染的樣式摔敛。最后表格效果如下圖：
后面具體的實(shí)現(xiàn)方法廷蓉，就不介紹了，你可以使用modal彈出框马昙，也可以跳轉(zhuǎn)到其他頁面桃犬。
（2）響應(yīng)式
在這個(gè)移動(dòng)優(yōu)先的互聯(lián)網(wǎng)時(shí)代刹悴，不適應(yīng)手機(jī)端的頁面都不好意思拿出來。Datatables的Responsive擴(kuò)展攒暇，似乎比較優(yōu)雅的解決了土匀，在線表格在手機(jī)端無法完美顯示的痛點(diǎn)。
上面預(yù)留的第一列發(fā)揮了它的用處扯饶，當(dāng)點(diǎn)擊+號(hào)時(shí)恒削，自動(dòng)展開隱藏的列，是不是比較優(yōu)雅的解決了尾序，在線表格在手機(jī)端查看的問題钓丰。實(shí)現(xiàn)方法非常簡(jiǎn)單，首先引入Responsive擴(kuò)展的庫文件每币，如下：
<link rel="stylesheet" href="/datatables.net-responsive-bs/css/responsive.bootstrap.min.css">
<!-- datatables responsive -->
<script src="/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/datatables.net-responsive-bs/js/responsive.bootstrap.min.js"></script>
在表格參數(shù)中加入responsive: true即可携丁，當(dāng)屏幕尺寸漸漸縮小的時(shí)候，后面的列就會(huì)自動(dòng)隱藏到+號(hào)里面兰怠。那么能不能定義優(yōu)先級(jí)梦鉴，讓我去定義哪些列優(yōu)先隱藏，哪些列后隱藏揭保。當(dāng)然可以肥橙，在columns中定義responsivePriority屬性即可。如下：
columns: [
{ "data": null, sortable: false, defaultContent: '' , responsivePriority: 2},
{ "data": "id" },
{ "data": "name", responsivePriority: 1},
{ "data": "price" , responsivePriority: 3},
{ "data": "column1" },
{ 'data': "column2" },
{ "data": "column3" },
{ "data": "column4" },
{ "data": null , defaultContent: '' ,responsivePriority: 4}
],
值越小秸侣，顯示優(yōu)先級(jí)越高存筏，沒有設(shè)置值的地方，按照列的先后順序依次隱藏味榛。
（3）按鈕功能
這個(gè)是Datatables比較有特色的一個(gè)功能椭坚，自由度比較高，可以自定義一系列的功能搏色。它是通過Buttons的擴(kuò)展來實(shí)現(xiàn)的善茎，在介紹Buttons之前，需要先了解一下DOM這個(gè)參數(shù)频轿，也就是表格的布局垂涯。
如上圖所示，整個(gè)表格頁面總共分為了5大塊航邢，這5大塊分別用一個(gè)字母來表示集币，分別為lftip，這是默認(rèn)的布局翠忠。DOM設(shè)置參考：
- l - Length changing
- f - Filtering input
- t - The Table!
- i - Information
- p - Pagination
- < and > - div elements
- <"#id" and > - div with an id
- <"class" and > - div with a class
- <"#id.class" and > - div with an id and class
如果我們要使用Buttons擴(kuò)展鞠苟，就需要給它預(yù)留一個(gè)位置，所以我們要在表格參數(shù)中，加上DOM的配置当娱。
簡(jiǎn)單介紹了下DOM吃既，現(xiàn)在我們引入Buttons的擴(kuò)展文件，官方文檔默認(rèn)提供了5個(gè)功能按鈕跨细，需要引入一些第三方庫鹦倚，我都一一標(biāo)注出來了，如下：
<!-- DataTable buttons -->
<script src="/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<!-- buttons 打印功能 -->
<script src="/datatables.net-buttons/js/buttons.print.min.js"></script>
<!-- buttons 導(dǎo)出功能 -->
<script src="/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/jszip/dist/jszip.min.js"></script>
<!-- buttons 生成PDF功能 -->
<script src="/pdfmake/build/pdfmake.min.js"></script>
<script src="/pdfmake/build/vfs_fonts.js"></script>
庫文件引入之后冀惭，接下來配置一下DOM參數(shù)以及Buttons參數(shù)震叙，如下：
dom: '<"pull-left"B>ft<"pull-left"i>p',
buttons: [
'copy', 'print', 'excel', 'csv', 'pdf'
],
從上面布局可以看出，Button靠左上散休，搜索右上媒楼，表格中間，信息在左下戚丸，分頁在右下划址。效果如下圖：
如果你正確的引入了上述的那些庫文件，且dom和buttons配置正確限府，那么不用寫一句代碼就可以直接擁有：復(fù)制夺颤，打印，導(dǎo)出excel胁勺，導(dǎo)出csv世澜，制作PDF的功能了。
但我并不滿足上述的一些功能署穗，我想自定義一些按鈕寥裂，完全沒有問題。假如蛇捌，我想添加一個(gè)刷新按鈕抚恒，在buttons里添加reload如下：
buttons: [
'copy', 'print', 'excel', 'csv', 'pdf', 'reload'
]
然后加上reload的定義：
$.fn.dataTable.ext.buttons.reload = {
text: '<i class="glyphicon glyphicon-refresh"></i>',
action: function ( e, dt, node, config ) {
dt.ajax.reload();
}
};
text為顯示的樣式咱台，action為執(zhí)行的操作络拌，dt.ajax.reload()指的是表格刷新。設(shè)置完之后回溺，你會(huì)發(fā)現(xiàn)按鈕組那多了一個(gè)按鈕春贸，如下圖：
你會(huì)發(fā)現(xiàn)那個(gè)圖標(biāo)挺好看的呀，默認(rèn)的那幾個(gè)按鈕也變成圖標(biāo)就好了遗遵，就像下圖所示：
于是修改一下buttons參數(shù)如下：
buttons: [
{
text: '<i class="glyphicon glyphicon-copy" title="復(fù)制"></i>',
extend: 'copy'
}, {
text: '<i class="glyphicon glyphicon-print" title="打印"></i>',
extend: 'print'
}, {
text: '<i class="glyphicon glyphicon-save-file" title="導(dǎo)出excel"></i>',
extend: 'excel'
}, {
text: '<i class="glyphicon glyphicon-list-alt" title="導(dǎo)出csv"></i>',
extend: 'csv'
}, {
text: '<i class="glyphicon glyphicon-file" title="生成pdf"></i>',
extend: 'pdf'
}, 'reload'
],
加上title屬性萍恕，當(dāng)鼠標(biāo)停留的時(shí)候，可以顯示提示文本车要。結(jié)合Buttons擴(kuò)展允粤，我們可以在表格中實(shí)現(xiàn)很多功能。
（4）編輯功能
編輯模塊在Datatables中是收費(fèi)的，其實(shí)我們通過「操作區(qū)」也是可以實(shí)現(xiàn)編輯需求的类垫，這里我再介紹一種具有Datatables特色的編輯功能司光。編輯不同于其他功能按鈕可以獨(dú)立存在，編輯功能需要先獲取到該行的數(shù)據(jù)悉患，然后才能執(zhí)行后續(xù)操作残家。
獲取行的操作，意味著需要選擇某行售躁，這里再引入一個(gè)擴(kuò)展模塊Select坞淮，導(dǎo)入庫文件：
<!-- datatables select -->
<script src="/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="/datatables.net-select-bs/js/select.bootstrap.min.js"></script>
表格參數(shù)中，添加Select的配置陪捷，設(shè)置為單選：
select: 'single',
結(jié)合Buttons模塊回窘，再添加一個(gè)編輯按鈕，上面已經(jīng)介紹過了揩局，相信你會(huì)添加毫玖。主要看下編輯按鈕的動(dòng)作。
$.fn.dataTable.ext.buttons.edit = {
text: '<i class="glyphicon glyphicon-pencil"></i>',
action: function ( e, dt, node, config ) {
var rows = dt.rows({ selected: true }); // 獲取選中的行
var selectedCount = rows.count(); // 選中的行數(shù)量
var data = rows.data()[0]; // 得到行數(shù)據(jù)
if(selectedCount){
var selectedId = data.id;
$('#edit').modal('show');
$('#edit small').html('編輯項(xiàng)目ID：' + selectedId);
$('#edit form input[name=name]').val(data.name);
$('#edit form input[name=price]').val(data.price);
$('#edit form input[name=column1]').val(data.column1);
$('#edit form input[name=column2]').val(data.column2);
$('#edit form input[name=column3]').val(data.column3);
$('#edit form textarea[name=column4]').val(data.column4);
}else{
alert('請(qǐng)選擇行再操作');
}
}
};
這里有一個(gè)判斷凌盯，選中了行付枫，才能接下來的操作。示例代碼就寫到這里驰怎，實(shí)際執(zhí)行編輯功能阐滩，需要結(jié)合后臺(tái)來實(shí)現(xiàn)。
好了县忌，Datatables的介紹掂榔，我想就講到這里，這里通過示例症杏，大概介紹了Responsive装获、Buttons、Select擴(kuò)展模塊的使用厉颤。由于功能實(shí)在太多穴豫，不可能面面俱到，而且官方文檔的介紹已經(jīng)很詳細(xì)了逼友，建議沒事翻翻文檔精肃。
