« 画像を使用しないで、ボックスの影をcss表現する方法 その2 | トップページ | 画像を使用しないで、ボックスの影をcss表現する方法 その2解説 »

2011年1月24日 (月)

table要素の行をソートさせるjQueryプラグイン「table sorter」

今回はテーブル要素の行を昇順/降順に並び替えを実現できるjQueryプラグイン「table sorter」をご紹介します。

Tablesorter

「table sorter」
デモページ
ファイルのダウンロード
jQueryファイルのダウンロード

使用するリソース
jquery.js
jquery.tablesorter.js

head要素への記入
<script type="text/javascript" src="/設置するフォルダ名/jquery.js"></script>
<script type="text/javascript" src="/設置するフォルダ名/jquery.tablesorter.min.js"></script> 
<script type="text/javascript">
 $(document).ready(function() 
 { $("#テーブルのID名を記述する").tablesorter(); } 
 );
</script>

CSSファイルはダウンロードしたフォルダ内にあるthemeフォルダに青と緑の2パターン用意されていました。

テーブル要素の記述例
<table id="テーブルのID名" class="tablesorter">
 <thead>
  <tr>
  <th>性</th>
  <th>名</th>
  <th>年齢</th>
  <th>スコア</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>山田</td>
   <td>次郎</td>
   <td>26</td>
   <td>1257</td>
  </tr>
  <tr>
   <td>田中</td>
   <td>五朗</td>
   <td>50</td>
   <td>1857</td>
  </tr>
 </tbody>
</table>

表項目にはtheadタグで囲みます。
ソートさせたい項目はtbodyタグで囲みます。
これで設定が完了しました。


|

« 画像を使用しないで、ボックスの影をcss表現する方法 その2 | トップページ | 画像を使用しないで、ボックスの影をcss表現する方法 その2解説 »

jQuery」カテゴリの記事

コメント

コメントを書く



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


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



トラックバック

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

この記事へのトラックバック一覧です: table要素の行をソートさせるjQueryプラグイン「table sorter」:

« 画像を使用しないで、ボックスの影をcss表現する方法 その2 | トップページ | 画像を使用しないで、ボックスの影をcss表現する方法 その2解説 »