Dynatable.js のCustom Queryで文字列を検索する

Dynatable.js - jQuery plugin for HTML5+JSON interactive tables and more というとても高機能で便利なテーブル関連のjQueryプラグインがあるのだが、その中のとても目ぼしい機能であるCustom Query。

サンプルを見ていただければわかるが

inputs: {
    queries: $('#search-year')
  }

のような、簡単な指定をセレクトボックスに行うだけで簡単にカスタムなフィルタリングができるという代物なのだが、試しててちょっとうまくいかなかった。
クエリーの文字列とテーブルにある文字列が合致してるはずなのだがヒットが0件になってしまう。おかしい。

よく考えるとサンプルのは数字だけフィルタリングしてる。
もしやと思ってさらに試した。自分のやつもセレクトボックスのほうを数字に、そしてテーブルのほうも数字にしたらうまくいった。

どうやら数字だけでしかこの機能はうまく行かないらしい。

ということで以下のようなイベントバインドをした。これはjsのindexOfを使ってクエリの文字列がターゲットの文字列の中にあるのかという判定をする関数である。
返り値には真偽値を返せばtrueになったものだけフィルタリングしてくれるようなので、indexOfの仕様で文字列がなかった場合は-1が返ってくるので0より大きいかどうかという論理判定をした。

$('#target').bind('dynatable:init', function(e, dynatable) {
                dynatable.queries.functions['targetElement'] = function(record, queryValue) {
                    return record.targetElement.indexOf(queryValue) > 0;
                };
            }).dynatable({ ... });

これをバインドしたらうまく文字列でも動いてくれた。

これくらいはデフォルトでできてほしかったが、このようにイベントバインドしてカスタマイズできるので中々に柔軟である。