jquery.dataTables实现表格分页搜索导出excel、csv、pdf及打印效果代码
代码语言:html
所属分类:表格
代码描述:jquery.dataTables实现表格分页搜索导出excel、csv、pdf及打印效果代码
代码标签: jquery.dataTables 表格 分页 搜索 导出 excel csv pdf 打印
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <title></title> <meta charset='utf-8'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery.dataTables.min.css"> <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>URL</th> <th>开始时间</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> <th>事件ID</th> <th>员工ID</th> <th>标题</th> <th>URL</th> <th>开始时间</th> </tr> </tfoot> </table> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.dataTables.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dataTables.buttons.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jszip.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/buttons.html5.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/buttons.flash.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pdfmake.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vfs_fonts.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/buttons.print.min.js"></script> <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' }, {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0