DataTables Part3 -File Export-

2017-08-08

前回までに引き続き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にしておくことで、列の表示や件数切替を行った最後の状態が記憶され、再読み込みしてもリセットされないようになる。
 

$(document).ready(function(){
    $('#example').DataTable( {
        /**
         * Part1
         * + dom にボタンを表す'B'をtopに追記
         * + colvis(Column visibility)のボタン名の変更
         */
        dom: '<"top"Bf>rt<"bottom"lip><"clear">',
        lengthMenu: [[10, 50, 100, 500, 9999], [10, 50, 100, 500, "全"]],
        language: {
            url: "https://cdn.datatables.net/plug-ins/1.10.15/i18n/Japanese.json",

            // ボタン名の変更
            buttons: {
                colvis: '表示 / 非表示'
            }
        },


        /**
         * Part2で説明済み
         */
        serverSide: true,
        ajax: "datatables_griddata1.php",


        /**
         * 列の表示状態等の記憶
         */
        stateSave: true,


        /**
         * Excel, CSV, PDFのFile Export
         * Clipboard, 印刷, 列の表示・非表示
         */
        buttons: [
            {
                extend: 'excelHtml5',
                title: 'Part3_export',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'csvHtml5',
                title: 'Part3_export',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'pdfHtml5',
                title: 'Part3_export',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'copyHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'print',
                exportOptions: {
                    columns: ':visible'
                },
            },
            'colvis'
        ]
    } );
});

 

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

PDF出力が日本語対応していない(PDFMakeの問題)

CSVはUTF-8で保存されるので、Excelでそのまま開くと日本語が文字化けする。

 

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

Demo3