2009-05-28

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プラグインと変わらない(と思う)。以下はサンプル。

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

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

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