2017-07-08 31 views

回答

0

一个你想要的东西,使用API​​数据表示例。

$(document).ready(function() { 
 
    $('#table_id').DataTable({ 
 
     dom: 'Bfrtip', 
 
     buttons: [ 
 
      'copy', 'csv', 'excel', 'pdf', 'print' 
 
     ] 
 
    }); 
 
});
/* 
 
* Table 
 
*/ 
 
table.dataTable { 
 
    margin: 0 auto; 
 
    clear: both; 
 
    width: 100%; 
 
} 
 

 
table.dataTable thead th { 
 
    padding: 3px 18px 3px 10px; 
 
    border-bottom: 1px solid black; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
    *cursor: hand; 
 
} 
 

 
table.dataTable tfoot th { 
 
    padding: 3px 18px 3px 10px; 
 
    border-top: 1px solid black; 
 
    font-weight: bold; 
 
} 
 

 
table.dataTable td { 
 
    padding: 3px 10px; 
 
} 
 

 
table.dataTable td.center, 
 
table.dataTable td.dataTables_empty { 
 
    text-align: center; 
 
} 
 

 
table.dataTable tr.odd { background-color: #E2E4FF; } 
 
table.dataTable tr.even { background-color: white; } 
 

 
table.dataTable tr.odd td.sorting_1 { background-color: #D3D6FF; } 
 
table.dataTable tr.odd td.sorting_2 { background-color: #DADCFF; } 
 
table.dataTable tr.odd td.sorting_3 { background-color: #E0E2FF; } 
 
table.dataTable tr.even td.sorting_1 { background-color: #EAEBFF; } 
 
table.dataTable tr.even td.sorting_2 { background-color: #F2F3FF; } 
 
table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="<script src = "https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 
<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script> 
 
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"></script> 
 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> 
 
<script src = "https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script> 
 
<script src= "https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script> 
 
<script src= "https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script> 
 
<script src= "https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/> 
 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css"/> 
 
<div> 
 
<table id="table_id"> 
 
     <thead>   
 
      <tr>    
 
       <th>Name</th>   
 
       <th>Age</th>    
 
       <th>Bot</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr>  
 
       <td>John</td> 
 
       <td>25</td> 
 
       <td><button type="button" id="myBtn_1">Select</button></td> 
 
       
 
      </tr> 
 
      <tr> 
 
       <td>Ana</td> 
 
       <td>22</td>  
 
       <td><button type="button" id="myBtn_2">Select</button></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Diana</td> 
 
       <td>23</td>  
 
       <td><button type="button" id="myBtn_3">Select</button></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Lino</td> 
 
       <td>32</td>  
 
       <td><button type="button" id="myBtn_4">Select</button></td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

重要提示:

一些功能可能无法在片段(打印)工作;

需要初始化,没有它们的代码不起作用。

欲了解更多信息,请访问以下链接:https://datatables.net/extensions/buttons/examples/initialisation/export.html

任何疑问,就问我对我的帮助。

+0

这个例子适用于mozila,chrome和IE。 –

+0

这不适用于我的应用程序。我按照给定的方式导出excel:

  • EXCEL
  • Aditi

    +0

    这不适用于我的应用程序。我按照给定的方式导出excel:

  • EXCEL
  • //绑定接受的Escroll文件详细信息(Datatable)函数EscrollAcceptedFiles(FileType){$(“#tblEscrollFileDetails”).DataTable({“processing”:true,“stateSave”: true,//用于持久数据bsort:true,“dom”:'lBfrtip',按钮:[{extend:'excelHtml5',标题:'Accepted'+“”+ FileType +“”+'文件',},{扩展:'pdfHtml5',标题:'接受'+“”+文件类型+“”+'文件',},]});} – Aditi

    相关问题