redwarrior’s diary

C#, ASP.NET, WEB, G*などの雑多な情報

ASP.NET MVCでjQuery DataTablesを使用する

何番煎じなのかわかりませんが、jQuery DataTablesを使ってみたので、メモを残しておきます。試したバージョンは、1.10.12。

公式サイト:

datatables.net

ASP.NET MVCでは、NuGetを使用して導入します。jQueryはバージョン2系でも問題ありませんでした。バージョン3系は試していません。

www.nuget.org

基本的な使い方

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行くらいまでがストレスなく表示できる感じでした。

以上です。