ASP.NET MVCでjQuery DataTablesを使用する
何番煎じなのかわかりませんが、jQuery DataTablesを使ってみたので、メモを残しておきます。試したバージョンは、1.10.12。
公式サイト:
ASP.NET MVCでは、NuGetを使用して導入します。jQueryはバージョン2系でも問題ありませんでした。バージョン3系は試していません。
基本的な使い方
thead、tbodyタグで作成したテーブルのtableタグにid属性(mytable)を設定し、画面上もしくは外部のjsファイルで、以下のようにidを指定してDataTableメソッド呼び出すだけです。
$(function () { $('#mytable').DataTable(); });
ASP.NET MVCでは、jsファイルやcssファイルはバンドル機能を使って配布されるので、BundleConfig.csに追記しないと参照できません。
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js", "~/Scripts/DataTables/jquery.dataTables.js", //←追加 "~/Scripts/DataTables/dataTables.bootstrap.js")); //←追加 bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/DataTables/css/dataTables.bootstrap.css", //←追加 "~/Content/site.css"));
日本語化
CDN上のファイルを参照する方法が良く紹介されていますが、社内システム等で外部へのアクセスを避けたい場合もあるので、CDNを使わない方法で行きます。
先ほどのDataTableメソッドの前に以下を記述することで、デフォルトメッセージを日本語で上書きします。
// デフォルトの設定を変更 $.extend($.fn.dataTable.defaults, { language: { "sEmptyTable": "テーブルにデータがありません", "sInfo": " _TOTAL_ 件中 _START_ から _END_ まで表示", "sInfoEmpty": " 0 件中 0 から 0 まで表示", "sInfoFiltered": "(全 _MAX_ 件より抽出)", "sInfoPostFix": "", "sInfoThousands": ",", "sLengthMenu": "_MENU_ 件表示", "sLoadingRecords": "読み込み中...", "sProcessing": "処理中...", "sSearch": "検索:", "sZeroRecords": "一致するレコードがありません", "oPaginate": { "sFirst": "先頭", "sLast": "最終", "sNext": "次", "sPrevious": "前" }, "oAria": { "sSortAscending": ": 列を昇順に並べ替えるにはアクティブにする", "sSortDescending": ": 列を降順に並べ替えるにはアクティブにする" } } }); $('#mytable').DataTable();
sSearchの値が、検索テキストボックスの左側の文字列ですが、画面よって変えたい場合もあると思います。その場合は、DataTableメソッド呼び出し時の引数で指定することが出来ます。
$('#mytable').DataTable({ language: { "sSearch": "絞り込み:" } });
列の設定
特定の列を検索対象から外したり、ソートできないようにしたり、非表示にしたりしたい場合は、columnDefsというプロパティに設定します。
$('#mytable').DataTable({ language: { "sSearch": "絞り込み:" }, columnDefs: [ //targetsは0始まり { targets: 0, width: 43, searchable: false, orderable: false }, //1列目 検索対象外、ソート不可 { targets: 1, width: 85, orderable: false }, //2列目 検索対象、ソート不可 { targets: 2, visible: false }, //3列目 非表示 ] });
パフォーマンスについて
HTMLを全て読み込んだ後、JavaScriptでページネーションや検索の制御をしているため、表示するレコード数が多いほど遅くなります。
試してみたところ12列の表で、1000行くらいまでがストレスなく表示できる感じでした。
以上です。