DataTable Excelのエクスポート
12349 ワード
公式サイトのドキュメントを参照してください.https://datatables.net/reference/button/excelHtml5
注意:1、datatablesプラグインを使用する場合、tableにはtheadラベル2、datatablesが行間および列間などのスタイルをサポートしていない必要があります.
<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が行間および列間などのスタイルをサポートしていない必要があります.