テーブルにフィルター機能を付けるjQueryプラグイン

Pocket

HTMLのテーブルにExcelのようなフィルター機能を付けようと思い、jQueryのプラグインを探したところ、見付からなかったので、自分で作ってみました。

サンプル

tablefilterサンプル

プラグイン

ダウンロードしてください。
jquery.tablefilter

使用例

<body>
<table id="mytable" border="1">
<tr><th>番号</th><th>名前</th><th></th><th>区分</th><th>所在地</th></tr>
<tr><td>1</td><td></td><td>100</td><td>A</td><td>埼玉県</td></tr>
<tr><td>2</td><td></td><td>200</td><td>B</td><td>千葉県</td></tr>
<tr><td>3</td><td></td><td>300</td><td>C</td><td>東京都</td></tr>
<tr><td>4</td><td></td><td>100</td><td>D</td><td>神奈川県</td></tr>
<tr><td>5</td><td></td><td>200</td><td>E</td><td>埼玉県</td></tr>
</table>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablefilter.js"></script>
<script type="text/javascript">
<!--
$(function () {
  $("table").tablefilter();
});
// --></script>
</body>

jQueryの本体と「jquery.min.js」と上でダウンロードした「jquery.tablefilter.js」を適当なフォルダに保存します。それに応じて「src=」の部分を書き換えてください。
「$("table").tablefilter();」と書くとそのページ内のすべてのテーブルにフィルターボタンが設置されます。
特定のテーブルだけに適用するときは、テーブルにidを設定し「$("#mytable").tablefilter();」のようにします。

[ 2012年3月24日 | カテゴリー: JavaScript | タグ: , , ]

« | »

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報