dataTables的導出Excel功能

時間 2019-11-18

標籤 datatables 導出 excel 功能欄目 Microsoft Office 简体版

原文原文鏈接

Datatables它是一款基於jQuery表格插件，鍾情於它操做dom的靈活。作後臺的同窗想必使用它能事半功倍，並且交互強、容易擴展。css

我也是最近要作公司後臺界面，表格涉及的不少，因此考慮使用DT，剛上手（感受還不錯呢），不足之處歡迎指正！：)html

datatables自己就提供了導出excel、csv、pdf等格式的功能，參考以下連接：https://datatables.net/extensions/buttons/examples/html5/excelTextBold.html（官方的例子導出excel，html5

有源碼和所需引入的文件）：https://datatables.net/extensions/buttons/examples/initialisation/export.html（導出csv/pdf/copy/打印）可供參考。jquery

1.所需引入的文件

1>.引入css文件：ajax

<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文件bootstrap

  <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.運行效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。