datatable导出excel、word、png、pdf等样式

最近在添加了datatable导出excel的功能，下面内容包括了将datatable数据转为json、text、excel、word、png、pdf等格式的实现过程

最终页面如下：



导出excel、text及json显示效果如下：


                                  




1.首先引入必须的js文件和css样式

<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.2.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.dataTables.min.js"></script>

<script src="../dist/tableExport.js"></script>

这些文件可在bootstrap官网中找到，tableExport.js可在网页中自行下载

2.body中的页面

<h3>datatable动态数据</h3>
<table class="table table-striped table-bordered table-hover" id="table1" >
<thead>
</thead>
<tbody>
</tbody>
</table>

<div id="export">
<button class="btn btn-info">
<a data-type="json" href="javascript:;">导出json</a>
</button>
<button class="btn btn-info">
<a data-type="txt" href="javascript:;">导出txt</a>
</button>
<button class="btn btn-info">
<a data-type="csv" href="javascript:;">导出csv</a>
</button>
<button class="btn btn-info">
<a data-type="xml" href="javascript:;">导出xml</a>
</button>
<button class="btn btn-info">
<a data-type="xls" href="javascript:;">导出excel</a>
</button>
<button class="btn btn-info">
<a data-type="doc" href="javascript:;">导出word</a>
</button>
<button class="btn btn-info">
<a data-type="image" href="javascript:;">导出图片</a>
</button>
<button class="btn btn-info">
<a data-type="pdf" href="javascript:;">导出pdf</a>
</button>
</div>

3.脚本实现

<script>
$(function(){
$("#table1").dataTable({
"destroy":true,
"bPaginate":false,
"bFilter":false,
/*"oLanguage":{
"sInfo":"显示 _START_ 至 _END_ 条    本页共 _TOTAL_ 条",
"sZeroRecords":"没有数据",
},
*/
"aoColumns":[
{"data":"name","sTitle":"姓名"},
{"data":"sex","sTitle":"性别"},
{"data":"age","sTitle":"年龄"},
{"data":"grade","sTitle":"成绩"},
/*	{"data":"  ","sTitle":"操作","bSortable":false,
"mRender":function(data,type,full){
return "<div class='hidden-sm hidden-xs action-buttons'><a id='detail' class='blue' title='查看详情'><i style='cursor:pointer' class='ace-icon fa fa-info-circle bigger-120 blue'></i></a>  <a href='#modal-table-editShop' data-toggle='modal' id='edit' class='blue' title='修改'><i class='ace-icon fa fa-edit bigger-130'></i></a></div>";
}},
*/
],

"aaData":[
{"name":"张三","sex":"男","age":"19","grade":"100"},
{"name":"张三","sex":"男","age":"19","grade":"100"},
{"name":"张三","sex":"男","age":"19","grade":"100"},
{"name":"张三","sex":"男","age":"19","grade":"100"},
{"name":"张三","sex":"男","age":"19","grade":"100"},
{"name":"李四","sex":"男","age":"21","grade":"99"},
{"name":"王丽","sex":"1","age":"22","grade":"45"},
],
});
})
var $exportLink = document.getElementById('export');
$exportLink.addEventListener('click', function(e){//点击事件

//在此处可以重新定义datatable数据，让datatable不显示分页
e.preventDefault();
if(e.target.nodeName === "A"){
tableExport('table1', 'table', e.target.getAttribute('data-type'));
}
}, false);
</script>

其中aaData中的数据可以是动态的，即通过ajax请求数据在处理数据格式，绑定到aaData属性中即可。

应用到实际项目中时出现只能导出第一页的数据，不能将datatable中的数据全部导出，解决方法，导出时重新定义datatable并设置分页不显示，这样就可以导出所有的数据