msawady’s engineering-note

なにも分からないエンジニアです。

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

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

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

DataTables | Table plug-in for jQuery

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

ソース

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して、セレクトボックスを作っています。

結果

f:id:msawady:20170919220930p:plain "DOOING" を選ぶと、DOINGのTODOをフィルタすることが出来ます。 f:id:msawady:20170919221048p:plain

感想

  • なんともいえない、「これじゃない」感がありますね....
  • header 側に上手くつけたかったんですが、力及ばず...
  • kendo grid のほうが自分のイメージに合ってるので、次回はこっちへの差し替えをやってみようかなと思います。

demos.telerik.com

  • ライブラリを使いやすいようにハックする力がないと、思ったようにフロントエンドの実装を進められないなぁという小並感。
  • いやまぁ力不足以外のなにものでもないんですが....

以上です。なんとも歯がゆい一週間でした。