5
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

参考文献

5
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?