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

TableExport.jsのボタン配置を変更したい

More than 1 year has passed since last update.

TableExport.jsのボタン配置を変えたかったのでその時のメモです。

TableExportのPropertiesを見てると
テーブルのヘッダかフッタにcaption入れてボタンを追加しているようでした。
画面内で別フォーム作ってその中に「出力」ボタンを入れたいなあって時はヘッダかフッタに出力されちゃうと困まりますが、かといってライブラリに直接手を加えたくはない...
jQueryで頑張ってみます。
基本ソースはこちら。

  <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>
    <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"],
              bootstrap: false
          });
      } );
    </script>
  </body>
</html>

DataTablesというライブラリを使ってテーブル周りを整形。
TableExportで、xlsxボタンを追加している状態です。

GoogleChromeの開発コンソールでボタンの中身を見てみると
ボタンにfile-blobとclassが追加されているのがわかるかと思います。
file-blobの中身はtableタグの中身をオブジェクトにしたものです。
新しくボタンタグを作ってそこにdata-fileblobをコピーするといけそうかも。

<button data-fileblob="{"data":[["Name","Position","Office","Age","Start date","Salary"],["Name","Position","Office","Age","Start date","Salary"],["Gloria Little","Systems Administrator","New York","59","2009/04/10","$237,500"],["Michael Silva","Marketing Designer","London","66","2012/11/27","$198,500"],["Paul Byrd","Chief Financial Officer (CFO)","New York","64","2010/06/09","$725,000"],["Tiger Nixon","System Architect","Edinburgh","61","2011/04/25","$320,800"]],"fileName":"example","mimeType":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","fileExtension":".xlsx"}" class="button-default xlsx">Export to xlsx</button>

というわけで組み上げたソースがこちら

<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>
    <button class="" id="excel_button" type="button">Excel</button>
    <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"],
              bootstrap: false
          });

         //ボタンのコピー
         var datafileblob = $(".xlsx").attr("data-fileblob");
         $("#excel_button").attr("data-fileblob", datafileblob);
         $("#excel_button").addClass("button-default");
         $("#excel_button").addClass("xlsx");
         $('table').find('caption').remove();

         //ボタンのイベントを作成
         $('#excel_button').on('click', function() {
           var object = $(this).data("fileblob"),
           data = object.data,
           fileName = "hogehoge";
           mimeType = object.mimeType,
           fileExtension = object.fileExtension;
           TableExport.prototype.export2file(data, mimeType, fileName, fileExtension);
         });
      } );

    </script>
  </body>
</html>

最初に提示したソースと違うところは、bodyタグの直下にbutton(idはexcel_button)を追加したのと、scriptの後半いろいろ足しました。

スクリプトがなにやっているかというと
ボタンのコピーをやってるところでは、
datafileblobでクラスにxlsxがついたDOMを呼び出して、data-fileblobを取得し、変数に突っ込んでいます。
でexcel_buttonにattributeを追加後、元々のボタンに付いていたbutton-defaultやxlsxクラスを追加しています。
で出力ボタンが2つもあるとうっとおしいので、tableのcaptionをremoveしちゃいます。

ボタンのイベント作成をやってるところは、ほとんどTableExportのコピーなのだけれど、
最初についていたボタンは$("button[data-fileblob]")で呼ばれるようになっていた。(TableExport.jsのソース - Github)
excel_buttonにclickイベントを追加して、TableExport.prototype.export2fileに投げればxlsxファイルのダウンロードが可能です。

という感じでした。 おしまい。

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