不积跬步,无以至千里;不积小流,无以成江海。

Dean's blog

  • Join Us on Facebook!
  • Follow Us on Twitter!
  • LinkedIn
  • Subcribe to Our RSS Feed

Datatables 导出所有数据

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);
    }
}

 

不允许评论
粤ICP备17049187号-1