DataTablesを利用してテーブルを作成してたんですが、
表示されているカラムを減らしたり、
xlsxなどのファーマットとしてexportする必要があったのでその時のメモ。
ソース全文はこちら↓
解説はソースの後に。
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.9.9/xlsx.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.3.9/js/tableexport.min.js"></script>
</head>
<body>
<div>
Toggle column:
<input type="checkbox" class="toggle-vis" data-column="0" checked>Name
<input type="checkbox" class="toggle-vis" data-column="1" checked>Position
<input type="checkbox" class="toggle-vis" data-column="2" checked>Office
<input type="checkbox" class="toggle-vis" data-column="3" checked>Age
<input type="checkbox" class="toggle-vis" data-column="4" checked>Start date
<input type="checkbox" class="toggle-vis" data-column="5" checked>Salary
</div>
<table id="example" class="display" 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>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<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>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
"scrollY": "200px",
"paging": false
} );
var tables = $("#example").tableExport({
formats: ["xlsx", "csv", "txt"],
bootstrap: false
});
$('input.toggle-vis').on( 'change', function (e) {
e.preventDefault();
var column = table.column( $(this).attr('data-column') );
column.visible( ! column.visible() );
$("#example").tableExport().update();
});
} );
</script>
</body>
</html>
ソースの中身はShow/ hide columns dynamically - Datatables.netのToggle columnのリンクをcheckboxに変更して、TableExportを足しただけです。
head部分
特に変わったところは無いですが、excelファイルへのエクスポートが必要なので、xlsx.core.min.jsを読み込ませてます。
body部分
div,checkbox
すべてにチェックを入れておく。
チェックが外れたら、表示されるカラムが減るようになる。
table
Show/ hide columns dynamically - Datatables.netのテーブルに展開されているデータをごっそり削っただけ
script
ここもほとんどDatatablesのサンプルと一緒なんですが、下記を追加してます。tableExportでは、デフォルトだとxlsの出力になってしまうので、formatsにxlsxを指定します。
var tables = $("#example").tableExport({
formats: ["xlsx", "csv", "txt"],
bootstrap: false
});
checkboxの状態に変更があれば、columを非表示にします。
そして、tableExportが最初に持っているテーブルデータをupdateします。
update()をやんないと、最初に表示されたテーブルの状態をexportしちゃうのでこれが必要でした。
$('input.toggle-vis').on( 'change', function (e) {
e.preventDefault();
var column = table.column( $(this).attr('data-column') );
column.visible( ! column.visible() );
$("#example").tableExport().update();
});
カラムが増減しても、エクスポートできるようになったので満足。
少しハマったところがあって、
TableExportにignoreColsというプロパティがある。
列の増減がある場合はこれを利用すればいいんだろうなと思って、これを使ってました。
checkboxの状態をチェックして、exportしたくないcolumを配列にいれて、ignoreColsに突っ込んでupdate()かけてました（汗
そもそもTable上のカラムが増減しているので、ignoreCols使っちゃうと、exportしたくないcolumの列番号が変わってしまうというオチでした。 update()だけでいいのねー。