table要素内をキーワードで
フィルタリングできる、と
いうプラグイン。シンプル
な用途ですが、割と需要が
あるのと、軽量なので一応
メモ。
キーワードを入力するとマッチしない行がテーブルから非表示される、というもの。圧縮版で0.9KBと結構軽量で済みます。
jquery.table_filter.js
たまに見かけるタイプのスクリプトですが、フィルタリングのみというのはなかなか無いので助かります。大容量なテーブルデータコンテンツには実装してあげたいところですね。
Sample
動作サンプルです。日本語だとChromeとFirefoxは別の挙動をするかも。IEは分からない。
コード
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script><script type="text/javascript" src="jquery.table_filter.js"></script> |
本体とプラグインを読み込みます。
$(function(){ $(".foo").table_filter({'table':'.bar'}); }); |
セッティングして完了です。
<input type="text" class="foo"><table class="bar"></table> |
マークアップでinput要素とtable要素にセッティングで指定したclassを振ればいいだけ。あとは普通にテーブルを書けばその中をフィルタリングしてくれます。
便利なのと軽量なのが良いですね。最近、データ量の多いテーブルを作ったので次の機会には提案してみようと思います。
