• かちびと.net

    table要素内をキーワードでフィルタリングする軽量なjQueryプラグイン・jquery.table_filter.jsのご紹介。便利で軽量なのがありがたいですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

table要素内をキーワードでフィルタリングする軽量なjQueryプラグイン・jquery.table_filter.js

スポンサーリンク

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を振ればいいだけ。あとは普通にテーブルを書けばその中をフィルタリングしてくれます。

便利なのと軽量なのが良いですね。最近、データ量の多いテーブルを作ったので次の機会には提案してみようと思います。

jquery.table_filter.js

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services