Datatables 表格插件
文章节选自如何快速将线下表格数据线上化
Datatables
这是我见过最强大的在线表格插件了，官方文档也比较完整，建议直接看英文版本，初次看可能会有点逻辑混乱，但是多看看，每次都有一些收获。这里我还是通过示例的方式，来介绍一下数据获取以及参数传递的方式。
1. 准备
相比Bootstrap-Table，Datatables的前台页面中需要定义表格的表头，否则将无法显示，代码如下：
<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>
在前后各多出一列，后面会介绍它的用处。表头定义好后，接下来就是引入库文件了，1个css文件，2个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>之前即可，引入正确的库文件之后，准备工作就OK了。
2. 初步使用
Datatables提供了4种获取表格数据的方式，这里只介绍：通过Ajax异步获取的方式。数据格式依然还是包含数据对象的数组，而且跟之前是同一组数据，看下初步效果：
image.png
同样的配方，不一样的味道，js中代码实现如下：
$('#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参数中数组的对象数量，一定要跟前台表格中th保持一致，否则无法渲染出来。 - 由于示例中，返回的是包含对象的数组类型，于是需要设置dataSrc为空，否则也无法得到数据。
Datatables提供多种返回数据格式，具体参照这里Ajax sourced data
3. 功能介绍
由于Datatables的功能实在太多了，这里也不可能全部介绍到，根据实际项目经验，主要介绍一些比较实用，或者跟Bootstrap-Table有差异性的一些功能点。
（1）操作区
还记得上面表格页面预留的两列吧，想必你也猜出来了，最右边的那列，就是用来放操作按钮的，我们添加一个表格参数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选择目标列，-1代表倒数第1列，render渲染的样式。最后表格效果如下图：
image.png
后面具体的实现方法，就不介绍了，你可以使用modal弹出框，也可以跳转到其他页面。
（2）响应式
在这个移动优先的互联网时代，不适应手机端的页面都不好意思拿出来。Datatables的Responsive扩展，似乎比较优雅的解决了，在线表格在手机端无法完美显示的痛点。
image.png
上面预留的第一列发挥了它的用处，当点击+号时，自动展开隐藏的列，是不是比较优雅的解决了，在线表格在手机端查看的问题。实现方法非常简单，首先引入Responsive扩展的库文件，如下：
<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>
在表格参数中加入responsive: true即可，当屏幕尺寸渐渐缩小的时候，后面的列就会自动隐藏到+号里面。那么能不能定义优先级，让我去定义哪些列优先隐藏，哪些列后隐藏。当然可以，在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}
],
值越小，显示优先级越高，没有设置值的地方，按照列的先后顺序依次隐藏。
（3）按钮功能
这个是Datatables比较有特色的一个功能，自由度比较高，可以自定义一系列的功能。它是通过Buttons的扩展来实现的，在介绍Buttons之前，需要先了解一下DOM这个参数，也就是表格的布局。
image.png
如上图所示，整个表格页面总共分为了5大块，这5大块分别用一个字母来表示，分别为lftip，这是默认的布局。DOM设置参考：
- 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扩展，就需要给它预留一个位置，所以我们要在表格参数中，加上DOM的配置。
简单介绍了下DOM，现在我们引入Buttons的扩展文件，官方文档默认提供了5个功能按钮，需要引入一些第三方库，我都一一标注出来了，如下：
<!-- 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 导出功能 -->
<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参数以及Buttons参数，如下：
dom: '<"pull-left"B>ft<"pull-left"i>p',
buttons: [
'copy', 'print', 'excel', 'csv', 'pdf'
],
从上面布局可以看出，Button靠左上，搜索右上，表格中间，信息在左下，分页在右下。效果如下图：
image.png
如果你正确的引入了上述的那些库文件，且dom和buttons配置正确，那么不用写一句代码就可以直接拥有：复制，打印，导出excel，导出csv，制作PDF的功能了。
但我并不满足上述的一些功能，我想自定义一些按钮，完全没有问题。假如，我想添加一个刷新按钮，在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为执行的操作，dt.ajax.reload()指的是表格刷新。设置完之后，你会发现按钮组那多了一个按钮，如下图：
image.png
你会发现那个图标挺好看的呀，默认的那几个按钮也变成图标就好了，就像下图所示：
image.png
于是修改一下buttons参数如下：
buttons: [
{
text: '<i class="glyphicon glyphicon-copy" title="复制"></i>',
extend: 'copy'
}, {
text: '<i class="glyphicon glyphicon-print" title="打印"></i>',
extend: 'print'
}, {
text: '<i class="glyphicon glyphicon-save-file" title="导出excel"></i>',
extend: 'excel'
}, {
text: '<i class="glyphicon glyphicon-list-alt" title="导出csv"></i>',
extend: 'csv'
}, {
text: '<i class="glyphicon glyphicon-file" title="生成pdf"></i>',
extend: 'pdf'
}, 'reload'
],
加上title属性，当鼠标停留的时候，可以显示提示文本。结合Buttons扩展，我们可以在表格中实现很多功能。
（4）编辑功能
编辑模块在Datatables中是收费的，其实我们通过「操作区」也是可以实现编辑需求的，这里我再介绍一种具有Datatables特色的编辑功能。编辑不同于其他功能按钮可以独立存在，编辑功能需要先获取到该行的数据，然后才能执行后续操作。
获取行的操作，意味着需要选择某行，这里再引入一个扩展模块Select，导入库文件：
<!-- 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>
表格参数中，添加Select的配置，设置为单选：
select: 'single',
结合Buttons模块，再添加一个编辑按钮，上面已经介绍过了，相信你会添加。主要看下编辑按钮的动作。
$.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(); // 选中的行数量
var data = rows.data()[0]; // 得到行数据
if(selectedCount){
var selectedId = data.id;
$('#edit').modal('show');
$('#edit small').html('编辑项目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('请选择行再操作');
}
}
};
这里有一个判断，选中了行，才能接下来的操作。示例代码就写到这里，实际执行编辑功能，需要结合后台来实现。
好了，Datatables的介绍，我想就讲到这里，这里通过示例，大概介绍了Responsive、Buttons、Select扩展模块的使用。由于功能实在太多，不可能面面俱到，而且官方文档的介绍已经很详细了，建议没事翻翻文档。
