コンテンツ
ブログ記事

テーブルで作成した表のデータをソート可能にするjQueryプラグインのご紹介です。
その名も「tablesorter」!
jQuery plugin: Tablesorter 2.0
さっそくテストしてみましたので、簡単に手順の説明などを書きます。
1. こちらより、jquery.tablesorter.zipごとダウンロードし解凍します。
様々なファイルが入ってますが、必要なのは「jquery.tablesorter.js」「jquery-latest.js」ファイルと
スタイルシートや画像が入っている「themes」フォルダです。
※私が設定したファイル構成
「index.html」というhtmlファイルと「js」というフォルダと「themes」というフォルダを同じディレクトリに配置します。
「js」フォルダの中には「jquery.tablesorter.js」と「jquery-latest.js」入っていまして、
「themes」フォルダの中には「blue」というフォルダがあり、その中に「style.css」が入っています。
2. HTMLのHEAD内に以下の記述を追加します。(jsファイルのパスの指定)
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
3. 同じくHTMLのHEAD内にスタイルシートの指定をします。
<link rel="stylesheet" href="themes/blue/style.css" type="text/css" media="screen" />
4. 手順2.のソースの後に以下のスクリプトを記述します。
<script type="text/javascript">
$(function() {
$("#tablesorter-demo").tablesorter({sortList:[[0,0]], widgets: ['zebra'], headers: { 3:{sorter: false}}});
});
</script>
5. BODY内にテーブルのコードを記述します。
<table id="tablesorter-demo" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th>選手名</th>
<th>ふりがな</th>
<th>年齢 </th>
<th>背番号</th>
<th>生年月日</th>
</tr>
</thead>
<tbody>
<tr>
<td>三浦 大輔</td>
<td>みうらだいすけ</td>
<td>36</td>
<td>18</td>
<td>1973.12.25</td>
</tr>
(中略)
</tbody>
</table>
以上です。
より詳しいソースは、テストサイトで確認してみてください。
補足
尚、手順4.の
- sortList:[[0,0]]は、デフォルトで[1番目の列]を[昇順]で表示しなさいという意味です。
sortList:[[表示する列を指定,ソートを昇順or降順かで指定]]☆表示する列を指定
0は一列目、1は2列目、3は3列目・・・という風に指定します。
☆ソートを昇順or降順かで指定
0は昇順、1は降順です。 - widgets: ['zebra']は、一行ずつ、交互に背景を変える指定です。
- headers: { 3:{sorter: false}}は、4列目のソートをさせない(false)為の指定です。
例えば、headers: { 2:{sorter: false}}と指定すれば、3列目のソートを無効に出来ます。ですので、私のテストサイトでは4列目の背番号のソートを無効にした事になります。
このようにお好みでいろいろとカスタマイズ可能なのが嬉しいですね!
後、もちろんスタイルシートもいじれますので、好きなテーブルスタイルを指定出来ます。
長くなりましたが、以上、tablesorterのご紹介記事でした。
こちらもあわせてどうぞ!
2009年01月27日(火)
最近の記事
- [jQuery]くるくる回転!?キュートな水平メニューFancy Navigation withCSS & jQuery!
- [WordPress]カテゴリページでのページ送りの不具合に関しての備考録
- [jQuery]自由自在!マウスオーバーで背景画像と文字色がフェードで切り変わるメニューColor Fading Menu
- [jQuery]マウスオーバーした画像にフェードイン・フェードアウト(透明度)する効果を!夏
- [jQuery]クロスフェードで切り替わる画像(URL)を簡単実装「Innerfade with jquery」!
- [CSS]画像をほんのちょっぴり豪華に装飾するスタイルシートのプチテクニック
- [CSS]夏だ!海だ!さわやかなデザインを実現するbackground-attachment: fixed;!
- [jQuery]3階層以上のドロップダウンメニューを表示する「droppy」!
- Movable Typeのテンプレートを確認・保存する方法
- 120個の優れたメニューが見れるサイト!
カテゴリー
- webデザイン関連 (11)
- WordPress (13)
- カスタマイズ (4)
- WordPress全般 (4)
- プラグイン (3)
- アップグレード (1)
- tips (5)
- movabletype (4)
- movabletype全般 (2)
- 雑記 (1)
- javascript (14)
- jQuery (12)
- SEO (2)

このエントリーにはまだコメントがありません。
http://miracle-ysdesign.com/blog/javascript/140.html/trackback