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