dataTable表格数据导出excel以及pdf和打印功能
表格数据增加excel以及pdf打印功能
首先，要使用导出excel和导出pdf、打印可以导入dataTable的相关的一些js和css文件
DataTable这个插件非常好用，它不但可以美化表格、还可以帮你自动地把表格分页、排序、搜索功能、以及导出相关excel和pdf
新建一个html文件，在头部引入相关的js和css
<link rel="stylesheet" href="css/jquery.datatables.min.css" /> <!-- dataTable主要css -->
<link rel="stylesheet" href="css/buttons.dataTables.min.css" /> <!-- dataTable表格按钮主要css -->
<script src="js/jquery.min.js"></script> <!-- dataTable表格主要js -->
<script src="js/jquery.datatables.min.js"></script> <!-- dataTable表格主要js -->
<script src="js/dataTables.buttons.min.js"></script> <!-- dataTable表格按钮主要js -->
<script src="js/jszip.min.js"></script>
<script src="js/buttons.html5.min.js"></script> <!-- 导出功能相关js -->
<script src="js/buttons.flash.min.js"></script> <!-- 导出功能相关js -->
<script src="js/pdfmake.min.js"></script> <!-- 导出功能相关js -->
<script src="js/vfs_fonts.js"></script> <!-- 导出功能相关js -->
<script src="js/buttons.print.min.js"></script> <!-- 导出功能相关js -->
引入相关文件后，只需要给我们的< table> 组件 新增一个id，等下直接就可以用js来识别它并自动帮你分页数据等等了…
标识好了以后开始写js控制分页
<script type="text/javascript">
$(document).ready( function () {
$('#example').DataTable({
dom: 'Bfrtip',
lengthMenu: [ [ 6, 10, 20, 30, 50, -1], [ 6 , 10, 20, 30, 50, "所有"] ],
language: {
emptyTable: '没有数据',
loadingRecords: '加载中...',
processing: '查询中...',
search: '请输入关键词:',
lengthMenu: '每页 _MENU_ 件',
zeroRecords: '没有数据',
paginate: {
'first': '第一页',
'last': '最后一页',
'next': '下一页',
'previous': '上一页'
},
info: '第 _PAGE_ 页 / 总 _PAGES_ 页,共 _TOTAL_ 项结果',
infoEmpty: '没有数据',
infoFiltered: '(过滤总件数 _MAX_ 条)',
},
buttons: [
{
extend: 'copyHtml5',
},
{
extend: 'excelHtml5',
title: 'Data export'
},
{
extend: 'pdfHtml5',
title: 'Data export'
},
{
extend: 'csvHtml5',
title: 'Data export'
},
{
extend:'print',
}
]
} );
$(".buttons-copy").text('复制');
$(".buttons-excel").text('导出excel');
$(".buttons-pdf").text('导出pdf');
$(".buttons-csv").text('导出csv');
$(".buttons-print").text('打印');
});
</script>
写成这样应该是一个比较好的基础分页了，接下来我们就看看效果：
导出以后数据没问题！完美！
下面是完整的html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title> 导出到Excel </title>
<meta charset='utf-8'>
<link rel="stylesheet" href="css/jquery.datatables.min.css" /> <!-- dataTable主要css -->
<link rel="stylesheet" href="css/buttons.dataTables.min.css" /> <!-- dataTable表格按钮主要css -->
<script src="js/jquery.min.js"></script> <!-- dataTable表格主要js -->
<script src="js/jquery.datatables.min.js"></script> <!-- dataTable表格主要js -->
<script src="js/dataTables.buttons.min.js"></script> <!-- dataTable表格按钮主要js -->
<script src="js/jszip.min.js"></script>
<script src="js/buttons.html5.min.js"></script> <!-- 导出功能相关js -->
<script src="js/buttons.flash.min.js"></script> <!-- 导出功能相关js -->
<script src="js/pdfmake.min.js"></script> <!-- 导出功能相关js -->
<script src="js/vfs_fonts.js"></script> <!-- 导出功能相关js -->
<script src="js/buttons.print.min.js"></script> <!-- 导出功能相关js -->
<style>
tbody td{
text-align: center;
}
</style>
</head>
<body>
<h1>表格数据导出案例</h1>
<table id="example" class="display" role="grid" aria-describedby="example_info">
<thead>
<tr>
<th>事件ID</th>
<th>员工ID</th>
<th>标题</th>
<th>地址</th>
<th>时间</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(document).ready(function(){
var xx=[
{
id: 1,
emptyid:"1",
title: '早班',
start: '2018-03-01'
},
{
id: 2,
emptyid:"2",
title: '中班',
start: '2018-03-07'
},
{
id: 3,
emptyid:"3",
title: '晚班',
start: '2018-03-09'
},
{
id: 4,
emptyid:"4",
title: '其他',
start: '2018-03-16'
},
{
id: 5,
emptyid:"5",
title: '早班',
start: '2018-03-11',
},
{
id: 6,
emptyid:"6",
title: '晚班',
start: '2018-03-12'
},
{
id: 7,
emptyid:"7",
title: '中班',
start: '2018-03-12'
},
{
id: 8,
emptyid:"8",
title: '其他',
start: '2018-03-12'
},
{
id: 9,
emptyid:"9",
title: '早班',
start: '2018-03-12'
},
{
id: 11,
emptyid:"10",
title: '其他',
start: '2018-03-13'
},
{
id: 12,
emptyid:"11",
title: '晚班',
url: 'http://www.baidu.com/',
start: '2018-03-28'
},
{
id: 13,
emptyid:"1",
title: '晚班',
// url: 'http://baidu.com/',
start: '2018-02-28'
},
{
id: 14,
emptyid:"1",
title: '早班',
start: '2018-04-01'
},
{
id: 15,
emptyid:"2",
title: '中班',
start: '2018-04-07'
},
{
id: 16,
emptyid:"3",
title: '晚班',
start: '2018-04-09'
},
{
id: 17,
emptyid:"4",
title: '其他',
start: '2018-04-16'
},
{
id: 18,
emptyid:"5",
title: '早班',
start: '2018-04-11',
},
{
id: 19,
emptyid:"6",
title: '晚班',
start: '2018-04-12'
},
{
id: 20,
emptyid:"7",
title: '中班',
start: '2018-04-12'
},
{
id: 21,
emptyid:"8",
title: '其他',
start: '2018-04-12'
},
{
id: 22,
emptyid:"9",
title: '早班',
start: '2018-04-12'
},
{
id: 23,
emptyid:"10",
title: '其他',
start: '2018-04-13'
},
{
id: 24,
emptyid:"11",
title: '晚班',
url: 'http://www.baidu.com/',
start: '2018-04-28'
},
{
id: 25,
emptyid:"1",
title: '晚班',
// url: 'http://baidu.com/',
start: '2018-04-28'
}
];
for(i=0;i<xx.length;i++){
var html=""+xx[i].id+" "+xx[i].emptyid+" "+xx[i].title+" "+xx[i].url+" "+xx[i].start+"