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

2022年2月9日

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

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

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

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

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

    dtOptions: DataTables.Settings = {
        stateSave: true
        // 省略
    };

dtOptions: DataTables.Settings = {

stateSave: true

// 省略

};

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

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

終わりに

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

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

Youtubeチャンネル開設いたしました。
チャンネル登録者1000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw

Posted by ちこ

まだ、コメントがありません