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

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