DataTablesとTableExportを利用しTable上のデータをxlsxやcsvとして出力する


DataTablesを利用してテーブルを作成してたんですが、
表示されているカラムを減らしたり、
xlsxなどのファーマットとしてexportする必要があったのでその時のメモ。

ソース全文はこちら↓
解説はソースの後に。

```index.html
<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](https://datatables.net/examples/api/show_hide.html)のToggle columnのリンクをcheckboxに変更して、TableExportを足しただけです。

## head部分

特に変わったところは無いですが、excelファイルへのエクスポートが必要なので、xlsx.core.min.jsを読み込ませてます。

## body部分
### div,checkbox
すべてにチェックを入れておく。
チェックが外れたら、表示されるカラムが減るようになる。

### table

[Show/ hide columns dynamically - Datatables.net](https://datatables.net/examples/api/show_hide.html)のテーブルに展開されているデータをごっそり削っただけ

### 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()`だけでいいのねー。

# 参考文献

- [TableExport.js](https://www.travismclarke.com/tableexport/)
- [Show/ hide columns dynamically - Datatables.net](https://datatables.net/examples/api/show_hide.html)