DataTablesでvisibleが反映されない時の対処

さやのすけさやのすけ

環境

現象

  • DataTablesのカラムに設定したvisibleが反映されない
  • ブラウザのキャッシュをクリアしても反映されない

例: 以下のコードで、非表示にしているはずの10列目が表示されてしまう

$(function() {
    $('#foo-table').DataTable({
        stateSave: true, // 表示状態を保持
        columnDefs: [
            // 10列目を非表示
            {targets: 10, visible: false},
        ],
    });
});

原因

  • 一緒に設定されているstateSaveオプションは、表示に関する全ての初期設定を上書きするため
  • 公式フォーラムに上記のように書いてあるが詳細不明。少なくともstateSave: trueによって、10列目が表示されている状態が保持されてしまっているらしい。

対策

stateSaveParamsオプションを使って、stateSaveの対象からcolumnsのvisibleを外す。

$(function() {
    $('#foo-table').DataTable({
        stateSave: true, // 表示状態を保持
        // stateSaveの対象からvisibleを外す
        stateSaveParams: function ( settings, data ) {
            for ( var i=0, ien=data.columns.length ; i<ien ; i++ ) {
                delete data.columns[i].visible;
            }
        },
        columnDefs: [
            // 10列目を非表示
            {targets: 10, visible: false},
        ],
    });
});

参考サイト