DataTables Part3 -File Export-

前回までに引き続きDataTablesについて。今回は拡張機能のうちの一つ、ファイルのエクスポートに関するお話。

これまでの投稿は下記の通り。

  • Part1 -Introduction-
  • Part2 -Server-side processing-
  •  

    Downloadから必要なものを選択して、パッケージを作る。
    今回使用するものとして下記を選択。

  • jQuery : jQuery 2.x
  • DataTables : DataTables
  • Buttons : Buttons, Column visibility, HTML5 export, JSZip, pdfmake, Print view
  •  

    Packaging optionsを Minify, Single file, CDN として出来上がったパッケージファイル(cssとjs)をHTMLから読み込む。HTMLファイルとSQLを作成しているPHPに関しては、パッケージファイルの読み込み以外は前回から変更なし。

     
    ユーザーjavascriptを編集する。Part2 -Server-side processing-の内容に加えて今回はボタンを追加している。具体的にはExcel、CSV、PDFのファイルエクスポート、クリップボード、印刷、列の表示・非表示(Column visibility)の6種類。

    まず、ボタンを表示したい位置に’B’をdomに付け加える。またこれはどちらでもよいのだが、ボタン名を変えたい場合はlanguage内で記述する。
    そして、buttonsでどの種類をどの順で並べるかを記述する。エクスポートしたファイル名は’title’で指定することが可能。

    また、stateSaveをtrueにしておくことで、列の表示や件数切替を行った最後の状態が記憶され、再読み込みしてもリセットされないようになる。
     

    <br />
    $(document).ready(function(){<br />
        $('#example').DataTable( {<br />
            /**<br />
             * Part1<br />
             * + dom にボタンを表す'B'をtopに追記<br />
             * + colvis(Column visibility)のボタン名の変更<br />
             */<br />
            dom: '&lt;&quot;top&quot;Bf&gt;rt&lt;&quot;bottom&quot;lip&gt;&lt;&quot;clear&quot;&gt;',<br />
            lengthMenu: [[10, 50, 100, 500, 9999], [10, 50, 100, 500, &quot;全&quot;]],<br />
            language: {<br />
                url: &quot;https://cdn.datatables.net/plug-ins/1.10.15/i18n/Japanese.json&quot;,</p>
    <p>            // ボタン名の変更<br />
                buttons: {<br />
                    colvis: '表示 / 非表示'<br />
                }<br />
            },</p>
    <p>        /**<br />
             * Part2で説明済み<br />
             */<br />
            serverSide: true,<br />
            ajax: &quot;datatables_griddata1.php&quot;,</p>
    <p>        /**<br />
             * 列の表示状態等の記憶<br />
             */<br />
            stateSave: true,</p>
    <p>        /**<br />
             * Excel, CSV, PDFのFile Export<br />
             * Clipboard, 印刷, 列の表示・非表示<br />
             */<br />
            buttons: [<br />
                {<br />
                    extend: 'excelHtml5',<br />
                    title: 'Part3_export',<br />
                    exportOptions: {<br />
                        columns: ':visible'<br />
                    }<br />
                },<br />
                {<br />
                    extend: 'csvHtml5',<br />
                    title: 'Part3_export',<br />
                    exportOptions: {<br />
                        columns: ':visible'<br />
                    }<br />
                },<br />
                {<br />
                    extend: 'pdfHtml5',<br />
                    title: 'Part3_export',<br />
                    exportOptions: {<br />
                        columns: ':visible'<br />
                    }<br />
                },<br />
                {<br />
                    extend: 'copyHtml5',<br />
                    exportOptions: {<br />
                        columns: ':visible'<br />
                    }<br />
                },<br />
                {<br />
                    extend: 'print',<br />
                    exportOptions: {<br />
                        columns: ':visible'<br />
                    },<br />
                },<br />
                'colvis'<br />
            ]<br />
        } );<br />
    });<br />
    

     

    これらのエクスポートについて、英語のデータのみ取り扱うのなら問題ないのだが、日本語を取り扱う場合問題となることがある点に注意。

  • PDF出力が日本語対応していない(PDFMakeの問題)
  • CSVはUTF-8で保存されるので、Excelでそのまま開くと日本語が文字化けする。
  •  

    具体的な動きはこちら。serverSideを使用しているとページングで動的にデータを読みだしているので、エクスポートしても表示されている分だけが出力されることになる。そのため全データをエクスポートしたい場合は、件数切替で全表示してからボタンを押す必要がある。