Angular DataTablesで画面が切り替わっても検索窓の情報やソートの情報を保持したいとき

2022年2月9日

今回はAngular DataTablesを使っていて画面が切り替わっても検索窓の情報やソートの情報を保持したいときどのようにすれば良いのかについてご紹介いたします。

Angular DataTablesで画面が切り替わっても検索窓の情報やソートの情報を保持したいとき

Angular DataTablesで作成されたテーブルで、画面を切り替えたときにソートの情報や検索窓に入れた情報を保持したいことがあると思います。

例えば、Angular DataTablesを作ったテーブルの中に、「コード」「名称」「作成日付」「更新日付」の4つの列があったとします。

このうち、初期表示の後「コード」の降順にソートを行い、再度画面を表示させたときに「コード」が降順の状態で再度描画させたいとします。

そのときは下記のようにdtOptionsにstateSaveという変数をtrueの状態で渡してあげてください。

これによって設定したソートの情報がlocalStorageに保存されて、再度画面を表示させたときに前回設定したソートの情報や検索窓の情報を保持することが可能です。

詳しくは下記の公式リファレンスに記載してあります。
https://datatables.net/reference/option/stateSave

終わりに

今回はAngular DataTablesを使っていて画面が切り替わっても検索窓の情報やソートの情報を保持したいときどのようにすれば良いのかについてご紹介いたしました。