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並設置分頁不顯示，這樣就可以導出所有的數據