简单介绍

官方地址:DataTables | Table plug-in for jQuery


这是另外一款强大的在线表格插件了,官方文档也比较完整,建议直接看英文版本,初次看可能会有点逻辑混乱,但是多看看,每次都有一些收获。


它的功能跟 bootstrap-table 相差无几,表格的基本功能都具备,只是在样式上有细微差别。


image.png


HTML 部分

不同于 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了。


JS 调用

datatables 提供了 4 种获取表格数据的方式,这里只介绍:通过 Ajax 异步获取的方式。返回数据格式依然还是包含数据对象的数组,而且跟之前是同一组数据,看下初步效果:



同样的配方,不一样的味道,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: ''}
    ]
});


这里需要注意的是:


  1. columns  参数中数组的对象数量,一定要跟前台表格中th保持一致,否则无法渲染出来。
  2. 由于示例中,返回的是包含对象的数组类型,于是需要设置dataSrc为空,否则也无法得到数据。datatables提供多种返回数据格式,具体参照这里 Ajax sourced data


由于 datatables 的功能实在太多了,这里也不可能全部介绍到,根据实际项目经验,主要介绍一些比较实用,或者跟 bootstrap-table有差异性的一些功能点。


操作区

还记得上面表格页面预留的两列吧,想必你也猜出来了,最右边的那列,就是用来放操作按钮的,我们添加一个表格参数 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 弹出框,也可以跳转到其他页面。


响应式

在这个移动优先的互联网时代,不适应手机端的页面都不好意思拿出来。datatables 的 responsive 扩展,似乎比较优雅的解决了,在线表格在手机端无法完美显示的痛点。



上面预留的第一列发挥了它的用处,当点击+号时,自动展开隐藏的列,是不是比较优雅的解决了,在线表格在手机端查看的问题。实现方法非常简单,首先引入 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}
],


值越小,显示优先级越高,没有设置值的地方,按照列的先后顺序依次隐藏。


按钮功能

这个是 datatables 比较有特色的一个功能,自由度比较高,可以自定义一系列的功能。它是通过 Buttons 的扩展来实现的,在介绍 Buttons 之前,需要先了解一下 DOM 这个参数,也就是表格的布局。



如上图所示,整个表格页面总共分为了5大块,这5大块分别用一个字母来表示,分别为 lftip,这是默认的布局。DOM设置参考:



如果我们要使用 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 靠左上,搜索右上,表格中间,信息在左下,分页在右下。效果如下图:



如果你正确的引入了上述的那些库文件,且 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() 指的是表格刷新。设置完之后,你会发现按钮组那多了一个按钮,如下图:



你会发现那个图标挺好看的呀,默认的那几个按钮也变成图标就好了,就像下图所示:



于是修改一下 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 扩展,我们可以在表格中实现很多功能。


编辑功能

编辑模块在 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 的介绍,我想就讲到这里,这里通过示例,大概介绍了 ResponsiveButtonsSelect 扩展模块的使用。由于功能实在太多,不可能面面俱到,而且官方文档的介绍已经很详细了,建议没事翻翻文档。


后台返回数据

依然是数据对象的数组,每一行数据为一个对象。