jQueryプラグイン：その１

様々の利用用途があるjQueryですが、その特徴の一つとして挙げられるのは
プラグインが豊富にあることだと思います。
その中の一つ、『tablesorter』を使ってみます。

一般的なHTMLのtableタグをソート可能なテーブルにしてくれます。
↓サンプルソースこんな感じ。

<link href="css/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="../lib/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery.tablesorter.js"></script> 

<script type="text/javascript">
$(document).ready(function()
     {
         $("#myTable").tablesorter();
     }
 );     
</script>

<table id="myTable" class="tablesorter"> 
<thead> 
<tr>     
<th>Last Name
</th>     
<th>First Name
</th>     
<th>Email
</th>     
<th>Due
</th>     
<th>Web Site
</th> 
</tr> 
</thead> 
<tbody> 
<tr>     
<td>Smith
</td>     
<td>John
</td>     
<td>jsmith@gmail.com
</td>     
<td>$50.00
</td>     
<td>http://www.jsmith.com
</td> 
</tr> 
<tr>     
<td>Bach
</td>     
<td>Frank
</td>     
<td>fbach@yahoo.com
</td>     
<td>$50.00
</td>     
<td>http://www.frank.com
</td> 
</tr> 
<tr>     
<td>Doe
</td>     
<td>Jason
</td>     
<td>jdoe@hotmail.com
</td>     
<td>$100.00
</td>     
<td>http://www.jdoe.com
</td> 
</tr> 
<tr>     
<td>Conway
</td>     
<td>Tim
</td>     
<td>tconway@earthlink.net
</td>     
<td>$50.00
</td>     
<td>http://www.timconway.com
</td> 
</tr> 
</tbody> 
</table>

サンプルは公式HP
The website is currently not available
から引用。
CSSもそこのものを利用。

実行結果。

次回はもう少し掘り下げてtablesorterを使ってみます。

参考文献：
http://holy.enyou.org/2008/03/10/using-jquery-tablesorter/
http://tablesorter.com/docs/