jQueryプラグイン: TableFilter

表にインクリメンタル・サーチで行を絞り込むフォームを付けるjQueryプラグイン、TableFilterを作った。似たようなものは前に書いたのだけどjQueryプラグインを作ってみたかったので書き直した。習作。

使い方は、

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablefilter.js"></script>
<script type="text/javascript">
$(function () {
  $("table").addTableFilter({
    labelText: "絞込み: ",
    size:      48
  });
});
</script>

という感じで、他のjQueryプラグインと変わらない(と思う)。以下はサンプル。

セ・リーグで4勝以上している投手(2009/05/27時点)
名前チーム勝利数利き腕
石川 雅規ヤクルト6
館山 昌平ヤクルト5
三浦 大輔横浜5
朝倉 健太中日5
グライシンガー巨人5
大竹 寛広島4
山口 鉄也巨人4
ゴンザレス巨人4
吉見 一起中日4

阪神でフィルタかけるとショボーン。

addTableFilter()に渡すjQueryオブジェクトがtableの時だけフォームを付けるので、$("body").addTableFilter();とかはダメ。そこらへんはCSSセレクタを使って$("#content table").addTableFilter()とするとか、目的のtable要素にid属性(class属性でも良いけど)を振ってやる必要がある。他の注意点はtbody要素が必須なことくらい(のはず)。

フィルタに「> 200」とか入力して、数値での比較によるフィルタリングとかを使えたりしたら面白いかも。表以外に使えても良さそう。とか書くだけはタダ。

追記@2009/06/05

GistページからGitHubにリポジトリを作って移動させた