« jQueryの使い方 - jQueryライブラリーの読み込み #jQuery | トップページ | タブの切り替えが出来るJavaScript「SimpleTabs」 »

2011年5月30日 (月)

テーブルの値を検索してくれるプラグイン「jQuery quickSearch」 #jQuery

Quicksearch

テーブルの値を検索してくれるプラグイン「jQuery quickSearch」の導入方法を解説します。

デモページ

一部のブラウザでデモページが動作しなかったため、サンプルページを用意しました。
サンプルページ

このプラグインはテーブルの値を検索してくれるプラグインとなります。
検索したい文字を入力するたびに、自動的に検索が始まります。

今回は検索に合致しない項目をグレー表示させる方法をご説明します。

使用するリソース

jquery.js
jquery.quicksearch.js

head要素への記入
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.js"></script>
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.quicksearch.js"></script>
<script type="text/javascript">
    $(function () {
    $('input#search').quicksearch('table#table_example tbody tr', {
    'delay':300,
    'selector':'th',
    'stripeRows':['odd','even'],
    'loader':'span.loading',
    'bind':'keyup click',
    'show':function () {
        this.style.color = '';
    },
    'hide': function () {
        this.style.color = '#ccc';
    },
    'prepareQuery': function (val) {
        return new RegExp(val, "i");
    },
    'testQuery': function (query, txt, _row) {
        return query.test(txt);
    }
    });
    });
</script>

オプションの補足説明
delay 自動的に検索するまでのスピードを設定します。
selector 検索する要素を指定します。

htmlへの記述方法(例)
<table id="table_example">
    <thead>
        <tr>
            <th>ブラウザ</th>
            <th>アクセス</th>
            <th>割合</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <th>Windows</th>
        <td>882</td>
        <td>74.49%</td>
        </tr>
        <tr>
        <th>Macintosh</th>
        <td>276</td>
        <td>23.31%</td>
        </tr>
        <tr>
        <th>Linux</th>
        <td>23</td>
        <td>1.94%</td>
        </tr>
        <tr>
        <th>Android</th>
        <td>1</td>
        <td>0.08%</td>
        </tr>
        <tr>
        <th>iPad</th>
        <td>1</td>
        <td>0.08%</td>
        </tr>
    </tbody>
</table>

|

« jQueryの使い方 - jQueryライブラリーの読み込み #jQuery | トップページ | タブの切り替えが出来るJavaScript「SimpleTabs」 »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/40159486

この記事へのトラックバック一覧です: テーブルの値を検索してくれるプラグイン「jQuery quickSearch」 #jQuery:

« jQueryの使い方 - jQueryライブラリーの読み込み #jQuery | トップページ | タブの切り替えが出来るJavaScript「SimpleTabs」 »