Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

参考文献

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away