DataTablesで、ページを切り替えると、ソートや、ページャや、フィルタで絞り込んだ結果がリセットされてしまう。
これをなんとかしたい。
DataTablesには、ちゃんとそのための設定が用意されており、saveStateというオプションで、状態(ソートやページャなど)を保存することができる。
状態の保存先は、デフォルトだとlocalStorageに保存され、sessionStorageに保存するようにすることもできる。
また、stateSaveCallbackやstateLoadCallbackを利用することで、カスタムの保存方法を利用することもできる。
stateDurationを指定することで、どのぐらい、その時の状態を保存しておくのかを設定できる。デフォルトは2時間。
とにかく、まずは、saveState: trueを設定すれば、利用可能。
1 2 3 4 5 |
$(document).ready(function() { $('#example').DataTable( { stateSave: true } ); } ); |
あとは、stateDurationを-1にすると、sessionStorageに保存するようになって、ブラウザを閉じたときに状態がリセットされるようになる。
1 2 3 4 5 6 |
$(document).ready(function() { $('#example').DataTable( { stateSave: true, stateDuration: -1 } ); } ); |
コメント