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并设置分页不显示，这样就可以导出所有的数据