コンテンツ

ブログ記事

------------------


テーブルで作成した表のデータをソート可能にする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のご紹介記事でした。

こちらもあわせてどうぞ!

------------------

コメント&トラックバック

------------------

このエントリーにはまだコメントがありません。

コメントをどうぞ(※コメントは承認制になっています。)





トラックバックURL

http://miracle-ysdesign.com/blog/javascript/140.html/trackback

«前の記事:「Lightbox 2プラグイン導入!」を読む

«次の記事:「WordPressのブログ名とタイトルを反転する[SEO]」を読む

最近の記事

カテゴリー

月別アーカイブ