使用DataTables导出excel表格
Posted 欢欢_blog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用DataTables导出excel表格相关的知识，希望对你有一定的参考价值。
一、首先在<head>标签中引入下面的样式表。
<style>
@import "DataTables-1.9.4/media/css/demo_page.css";
@import "DataTables-1.9.4/media/css/demo_table.css";
@import "DataTables-1.9.4/media/css/demo_table_jui.css";
@import "DataTables-1.9.4/extras/TableTools/media/css/TableTools.css";
@import "DataTables-1.9.4/extras/TableTools/media/css/TableTools_JUI.css";
</style>
二、在</body>标签前面(这个是个人习惯，你也可以不放在这边)引入下面的javascript。
<script src="DataTables-1.9.4/media/js/jquery.js"></script>
<script src="DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
<script src="DataTables-1.9.4/extras/TableTools/media/js/TableTools.min.js"></script>
引入这些文件是一个难点，因为 DataTables-1.9.4文件夹中的文件很多，不知道该引入哪些，这是写这篇文章的主要目的。
再讲一下怎样调用接口。DataTables是通过 $( "#" + id).dataTable()接口来调用的，其中id是table中的id属性值。下面是我调用接口的代码：
toExcel: function (id) {
$("#" + id).dataTable({
"bJQueryUI": false,
\'bPaginate\': false, //是否分页
"bRetrieve": false, //是否允许从新生成表格
"bInfo": false, //显示表格的相关信息
"bDestroy": true,
"bServerSide": false,
"bProcessing": true, //当处理大量数据时，显示进度，进度条等
"bFilter": false, //搜索框
"bLengthChange": false, //动态指定分页后每页显示的记录数
"bSort": false, //排序
"bStateSave": false, //缓存
"sAjaxDataProp": "data",
"sDom": \'T<"clear">lfrtip\'
"oTableTools": {
"sSwfPath": "DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
}
} );
}
首先得在html<table>标签中加上一个id属性，然后把id值传给下面这个函数(这个封装函数可以自己写)，最 后再调用这个函数就可以了。想知道函数的各个属性是什么意思，可以阅读http://www.cnblogs.com/nier/archive /2012/03/18/2404836.html，里面有所以属性的介绍。
效果图：
图片上方有一排按钮，下方是从服务器获取的数据表格。点击图片上方的Copy可以复制表格内容，点击CSV、Excel生成的都是csv格式的文件，可以用Excel或wps打开，点击PDF生成pdf文件，点击Print会在网页上打印出表格内容。
文章转自：http://www.tuicool.com/articles/ArEz63
以上是关于使用DataTables导出excel表格的主要内容，如果未能解决你的问题，请参考以下文章
Datatables.net - 自定义时导出到 Excel 显示错误
Symfony 5 + Webpack Encore + Datatables：未显示按钮
使用 webpack 时不显示 Datatables.net Excel 导出按钮
使用 DT 导出表格时保持格式（DataTables 按钮扩展）
带有 Excel 的 Datatables TableTools，pdf 导出功能不适用于 firefox，但只能在 Chrome 中使用