Datatables它是一款基於jQuery表格插件，鍾情於它操作dom的靈活。做后台的同學想必使用它能事半功倍，而且交互強、容易擴展。
我也是最近要做公司后台界面，表格涉及的很多，所以考慮使用DT，剛上手（感覺還不錯呢），不足之處歡迎指正！：)
datatables本身就提供了導出excel、csv、pdf等格式的功能，參考如下鏈接：https://datatables.net/extensions/buttons/examples/html5/excelTextBold.html（官方的例子導出excel，
有源碼和所需引入的文件）：https://datatables.net/extensions/buttons/examples/initialisation/export.html（導出csv/pdf/copy/打印） 可供參考。
1.所需引入的文件
1>.引入css文件：
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" /> <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css"/>
2>.引入js文件
<script src="http://cdn.gbtags.com/datatables/1.10.5/js/jquery.js"></script> <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js "></script> <script src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>
2.html代碼
<!-- HTML代碼片段中請勿添加<body>標簽 //--> <div id="container"> <!-- 定義一個表格元素 --> <table id="example" class="display nowrap" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> </tbody> </thead> </table> </div>
3.js代碼
$(document).ready(function() { $('#example').DataTable( { dom: 'Bfrtip', "buttons": [ { 'extend': 'excelHtml5', 'text': '導出excel',//定義導出excel按鈕的文字 'exportOptions': { 'modifier': { 'page': 'current' } } } ] }); });
4.運行效果
