Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have 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()だけでいいのねー。

参考文献

328
フロントエンド初心者
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