Angular DataTablesで検索窓の入力において特定の列を検索対象から除きたいとき

今回はAngular DataTablesを使っているときに、検索窓で入力したときに特定の列のみ検索対象から除きたいときにどうすれば良いのかについてご紹介いたします。



Angular DataTablesで検索窓の入力において特定の列を検索対象から除きたいとき

Angular DataTablesを使っているときに、ボタンなどを配置したときに検索窓に入力したときにボタンの文字に引っかかってしまい、すべて検索されてしまうことなどあると思います。
例えば、Angular DataTablesの中に「編集」という文字列を含むボタンがあり、検索窓に「編集」と入力するとすべて検索に引っかかってしまうなどです。

しかし、dtOptionsを設定するときに、searchableの変数を渡すことで特定の列について、検索対象から外すことができます。

例として、「コード」「名称」という二つの列があり、さらにもう一つ「編集」ボタンが並ぶ列が一つあったとします。

そんなときは、次のように書くことで「編集」ボタンにある「編集」という文字列を検索対象から除外することが可能です。

targetsというのは列のインデックス番号です。
3列目に「編集」ボタンが存在するため、この場合はtargetsに2を設定します。

詳しくはリファレンスをご覧ください。
https://datatables.net/reference/option/columns.searchable

終わりに

今回はAngular DataTablesを使っているときに、検索窓で入力したときに特定の列のみ検索対象から除きたいときにどうすれば良いのかについてご紹介いたしました。

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

Youtubeチャンネル開設いたしました。
よろしければチャンネル登録お願いいたします。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw






Angular

Posted by ちこ