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

2022年2月9日

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

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

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

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

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

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

    dtOptions: DataTables.Settings = {
        columnDefs: [{
            targets: 2,
            orderable: false,
            searchable: false
        }],
        // 省略
    }