报表系统练手(3) -- DataTables的使用 - 未知列数的设置

这章节 主要 介绍项目实战中 datatables 的自定义列，包括表头，行数据等。

GitHub 资源 请大家再等几天。

一、基础表头设置

Datatables 中定义列表头信息有三种方式，

1. HTML中写<tr><th>第一列</th>...</tr>
2. Datatables 的 columns 属性，该属性是定义table 的全部列信息

$('#example').dataTable( { "columns": [ { "title": "My column title" }, null, null, null, null ] } );

3. Datatables 的 columnDefs 属性，该属性是定义table 的某些列信息

$('#example').dataTable( { "columnDefs": [ { "title": "My column title", "targets": 0 } ] } );

二、设置 x（未知） 列信息

在报表统计中，按月统计中国全部省份前半年或者后半年的 经济变化。

时间是个变量，但是需求是以时间为表头，不知道用户选的或者填的是那几个月，这种情况下表头如何设置呢？

columns 支持函数吗？如果可以在函数中 确定了数据，在交给columns应该是可以的吧。遗憾的是：columns不支持函数。

那可以先把列的数据确定了，在定义表格，可以吗？当然可以喽。

这里介绍另外两种方法：

1. 很久以前的立即执行函数，也可以叫匿名函数吧

(function(){ .... return ['2017-01', '2017-02', '2017-03', '2017-04'] })();

用法其实和先确定列再定义表格是一样的，只不过是。。。自己体会吧 0.0

2. 额，第二种方法。。。好像行不通的样子，哈哈。我的想法是利用ES6 的 块作用域方式，不过没有试验成功。

2.1

{123}

2.2

{['2017-01', '2017-02', '2017-03', '2017-04']}

2.3

{123, ['2017-01', '2017-02', '2017-03', '2017-04'] }

2.4

三、自定义列数据

Datatables 属性columns 中的 data, render，配合使用.

render 回调函数中的 data 是该行的该列数据， row是该行数据。具体使用方法参见官网链接：

https://datatables.net/reference/option/columns.render

$('#example').dataTable( {

data: [[11,12,13],[21,22,23]],

"columns": [

....

{ "title": "总和",

render:function(data, type, row, meta){

return row[0]+row[1]+row[2];

}

}

]

} );

四、API使用

1. 删除表格全部数据 table.rows().data().remove().draw();
2. 添加新的datas到表格中 table.rows.data(datas).draw();
3. 销毁表格重新定义 table.destroy().draw() $("#exTable").empty().Datatable({...});