<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>datatable export</title>
<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="jquery.dataTables.bootstrap.min.js"></script>
-->
</head>
<body>
<h1>datatable导出excel表格</h1>
<h3>datatable静态数据</h3>
<table class="table table-hover" id="table2" width="200px">
<thead>
<tr>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://w3cboy.com" target="_blank">文字</a></td>
<td>咨询</td>
<td>测试</td>
</tr>
<tr>
<td><a href="http://w3cboy.com" target="_blank">文字</a></td>
<td>咨询</td>
<td>测试</td>
</tr>
<tr>
<td><a href="http://w3cboy.com" target="_blank">文字</a></td>
<td>咨询</td>
<td>测试</td>
</tr>
<tr>
<td><a href="http://w3cboy.com" target="_blank">文字</a></td>
<td>咨询</td>
<td>测试</td>
</tr>
<tr>
<td><a href="http://w3cboy.com" target="_blank">文字</a></td>
<td>咨询</td>
<td>测试</td>
</tr>
<tr>
<td><a href="http://w3cboy.com" target="_blank">文字</a></td>
<td>咨询</td>
<td>测试</td>
</tr>
</tbody>
</table>
<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>
<script src="tableExport.js"></script>
<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){
e.preventDefault();
if(e.target.nodeName === "A"){
tableExport('table1', 'table', e.target.getAttribute('data-type'));
}
}, false);
</script>
</body>
</html>
