【Javascript】【DataTables】DataTables を利用した Bootstrap テーブルのフィルタ機能

テーブルのフィルタリングを実装

DataTables を使ってフィルタリング機能を実装しました

フッターにセレクトボックスを利用したエクセル的なフィルタリングを出来るようになっています。

ソース

build.sbtに依存関係を追加

webJarsを利用してインポートを行います。

libraryDependencies += "org.webjars.bower" % "datatables" % "1.10.15"

html の headの中でインポート

    @Html(webJarsUtil.css("jquery.dataTables.min.css"))
    @Html(webJarsUtil.css("dataTables.bootstrap4.min.css"))
    @Html(webJarsUtil.script("jquery.dataTables.min.js"))
    @Html(webJarsUtil.script("dataTables.bootstrap4.min.js"))

DataTables を読み込み

    var todoTable = $('#todoTable').DataTable({
         initComplete: function () {
             this.api().columns().every( function () {
                 var column = this;
                 var select = $('<select><option value=""></option></select>')
                     .appendTo( $(column.footer()).empty() )
                     .on( 'change', function () {
                         var val = $.fn.dataTable.util.escapeRegex(
                             $(this).val()
                         );

                         column
                             .search( val ? '^'+val+'$' : '', true, false )
                             .draw();
                     } );

                 column.data().unique().sort().each( function ( d, j ) {
                     select.append( '<option value="'+d+'">'+d+'</option>' )
                 } );
             } );
         }
     } );

DataTables example - Individual column searching (select inputs) からコピペしています。

var todoTable = $('#todoTable').DataTable(

とすることで、テーブルをDataTableにすることができます。

                 var select = $('<select><option value=""></option></select>')
                     .appendTo( $(column.footer()).empty() )
                     .on( 'change', function () {
                         var val = $.fn.dataTable.util.escapeRegex(
                             $(this).val()
                         );

                         column
                             .search( val ? '^'+val+'$' : '', true, false )
                             .draw();
                     } );

html に空のtfootタグを追加し上記スクリプトを読み込むと、各カラムのフッターにセレクトボックスを追加し、on('change')で選ばれた値と同一の値を持つレコードでフィルタ（検索→再描画）をすることが出来ます。

 column.data().unique().sort().each( function ( d, j ) {
                     select.append( '<option value="'+d+'">'+d+'</option>' )
                 } );

セレクトボックスの中身を作っているところです。各カラムのデータをuniqして、セレクトボックスを作っています。