Datatables是一个功能强大的插件,提供了固定表单、固定列、排序、自定义显示列等,同时也提供了一些功能扩展,比如将表格的内容导出为PDF、EXCEL、CSV等。其中导出Excel是日常开发经常使用到的功能,不知是否为本人英文阅读能力太低的缘故,发现Datatables只支持导出已加载数据的办法。看来只能通过一些变通的办法来导出所有数据了。
Datatables的官网:https://www.datatables.net
API文档:(英文):https://www.datatables.net/manual/
API文档:(中文):http://www.datatables.club/manual/
通过查找文档,与导出Excel相关的配置为exportOptions详细的配置见
:https://datatables.net/reference/api/buttons.exportData()
但exportOptions并没有(或是没找到)导出全部数据的设置。查找文档与翻查API,在导出前有一个customizeData方法,可以对数据进行自定义。配置如下:
{
extend: 'excel',
text: '导出所有数据',
exportOptions: {
//配置
},
customizeData: function (data) {
//自定义数据
}
}
其中data是最终导出的数据,它一个包含了三个属性的对象:
{
header: [], //导出的表头
body: [,], //导出的具体数据,是一个二维数组
footer: [] //导出的页脚
}
只需要对data进行调整,即可实现全部数据导出,大致过程分两步:
1、加载所有数据;
2、将数据加载到data.body中去;
而在第二步的数据,还可以将原始数据通过column.render方法进行格式化,获取最终和展示列表一致的效果。示例代码如下:
{
extend: 'excel',
text: '导出所有数据',
customizeData: function (data) {
var options = loadDataConfig();//loadDataConfig()是一个ajax配置,用于加载数据
options.async = false;//同步加载
options.success = function (res) {
data.body = [];//先清空数据
var columns = table.columns;
var exps = [];
//找出当前导出的column
for (var j = 0; j < columns.length; j++) {
for (var i = 0; i < data.header.length; i++) {
if (data.header[i] == columns[j].title) {
exps.push(columns[j]);
break;
}
}
}
//填充需要导出的数据
for (var i = 0; i < res.data.length; i++) {
var obj = res.data[i];
var newRow = [];
for (var j = 0; j < exps.length; j++) {
if (exps[j].data) {
//如果定义了render则进行格式化
if (exps[j].render) {
newRow.push(exps[j].render(obj[exps[j].data]));
} else {
newRow.push(obj[exps[j].data]);
}
} else {
if (exps[j].render) {
newRow.push(exps[j].render(""));
} else {
newRow.push("");
}
}
}
data.body.push(newRow);
}
};
$.ajax(options);
}
}