dataTables导出Excel

参考官网文档,https://datatables.net/reference/button/excelHtml5


<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<link rel="stylesheet" type="text/css" href="../css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../css/buttons.dataTables.min.css">
<script type="text/javascript" src="../../jquery.min.js">script>
<script type="text/javascript" src="../js/jquery.dataTables.js">script>
<script type="text/javascript" src="../js/dataTables.buttons.min.js">script>
<script type="text/javascript" src="../js/jszip.min.js">script>
<script type="text/javascript" src="../js/buttons.html5.min.js">script>
<style type="text/css">
    table{
        width:60%;
        height:300px;
        border:1px solid #000;
        border-collapse: collapse;
        text-align: center;
    }
    td{
        border:1px solid #000;
    }
style>

<script type="text/javascript">
    $(function(){
        $('#sortable').DataTable({
            dom: 'Bfrtip',
            buttons: [{
                extend: 'excelHtml5',
                text: 'Save current page',
                exportOptions: {
                    modifier: {
                        page: 'current'
                    }
                }
            }]
        });
    });
script>
head>
<body>
    <table id="sortable">
        <thead>
            <tr>
                <th>Column 1th>
                <th>Column 2th>
                <th>Column 3th>
                <th>Column 4th>
                <th>Column 5th>
            tr>
        thead>
        <tbody>
            <tr>
            <td>1aaatd>
            <td>1aaatd>
            <td>ccctd>
            <td>dddtd>
            <td>eeetd>
        tr>
        <tr>
            <td>3aaatd>
            <td>34bbbtd>
            <td>ccctd>
            <td>dddtd>
            <td>修改td>
        tr>
        <tr>
            <td>22bbbtd>
            <td>22bbbtd>
            <td>ccctd>
            <td>dddtd>
            <td>eeetd>
        tr>
        <tr>
            <td>5aaatd>
            <td>55bbbtd>
            <td>ccctd>
            <td>dddtd>
            <td>eeetd>
        tr>
        <tr>
            <td>4aaatd>
            <td>44bbbtd>
            <td>ccctd>
            <td>dddtd>
            <td>eeetd>
        tr>
        tbody>
    table>
body>
html>

注意:
1、使用datatables插件时,table中必须有thead标签
2、datatables不支持跨行和跨列等样式

你可能感兴趣的:(前台js插件)