Datatables 表格插件

JS 插件文档库邀你一起协同创作 -

Datatables

这是我见过最强大的在线表格插件了，官方文档也比较完整，建议直接看英文版本，初次看可能会有点逻辑混乱，但是多看看，每次都有一些收获。这里我还是通过示例的方式，来介绍一下数据获取以及参数传递的方式。

1. 准备

相比Bootstrap-Table，Datatables的前台页面中需要定义表格的表头，否则将无法显示，代码如下：

  

    

      

      
ID
      
Item name
      
Item price
      
列1
      
列2
      
列3
      
列4
      
操作
    
  

在前后各多出一列，后面会介绍它的用处。表头定义好后，接下来就是引入库文件了，1个css文件，2个js文件。如下：

js文件依然还是放到最底下，之前即可，引入正确的库文件之后，准备工作就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: ''}
    ]
});

这里需要注意的是：

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

3. 功能介绍

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

（1）操作区

还记得上面表格页面预留的两列吧，想必你也猜出来了，最右边的那列，就是用来放操作按钮的，我们添加一个表格参数columnDefs用来定义列。

columnDefs: [
  {
        targets: -1,
        visible: false,
        sortable: false,
        render: function(data, type, row){
            return '' + 
            ' ' + 
            ''+ 
            '' + 
            ' ' + 
            ''+
            '' +
            ' ' + 
            '';
        }
    }
],

targets选择目标列，-1代表倒数第1列，render渲染的样式。最后表格效果如下图：

image.png

后面具体的实现方法，就不介绍了，你可以使用modal弹出框，也可以跳转到其他页面。

（2）响应式

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

image.png

上面预留的第一列发挥了它的用处，当点击+号时，自动展开隐藏的列，是不是比较优雅的解决了，在线表格在手机端查看的问题。实现方法非常简单，首先引入Responsive扩展的库文件，如下：

在表格参数中加入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个功能按钮，需要引入一些第三方库，我都一一标注出来了，如下：

库文件引入之后，接下来配置一下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: '',
    action: function ( e, dt, node, config ) {
        dt.ajax.reload();
    }
};

text为显示的样式，action为执行的操作，dt.ajax.reload()指的是表格刷新。设置完之后，你会发现按钮组那多了一个按钮，如下图：

image.png

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

image.png

于是修改一下buttons参数如下：

buttons: [
    {
        text: '',
        extend: 'copy'
    }, {
        text: '',
        extend: 'print'
    }, {
        text: '',
        extend: 'excel'
    }, {
        text: '',
        extend: 'csv'
    }, {
        text: '',
        extend: 'pdf'
    }, 'reload'
],

加上title属性，当鼠标停留的时候，可以显示提示文本。结合Buttons扩展，我们可以在表格中实现很多功能。

（4）编辑功能

编辑模块在Datatables中是收费的，其实我们通过「操作区」也是可以实现编辑需求的，这里我再介绍一种具有Datatables特色的编辑功能。编辑不同于其他功能按钮可以独立存在，编辑功能需要先获取到该行的数据，然后才能执行后续操作。

获取行的操作，意味着需要选择某行，这里再引入一个扩展模块Select，导入库文件：

表格参数中，添加Select的配置，设置为单选：

select: 'single',

结合Buttons模块，再添加一个编辑按钮，上面已经介绍过了，相信你会添加。主要看下编辑按钮的动作。

$.fn.dataTable.ext.buttons.edit = {
    text: '',
    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扩展模块的使用。由于功能实在太多，不可能面面俱到，而且官方文档的介绍已经很详细了，建议没事翻翻文档。

更多Chat...