テーブルにソート機能を簡単に実装する

テーブルを表示した時にソート機能を付けたいことはある程度あると思います。

そんなとき自分はそれぞれのフィールド毎にソート用のリンクを作成し、
GETでソートするフィールド名を渡してサーバ側でソートしなおした結果を
表示する。という方法をとってました。

しかし、jQueryだとそんなめんどーなことをやらずに簡単にソート機能を実現できます。

それが、「TableSorter」プラグインです。

以下から”jquery.tablesorter.zip”をダウンロードしてサーバにアップして回答してください。

http://tablesorter.com/docs/

回答して出てくる”jquery.tablesoter.min.js”というのを読み込んで使用します。
そのほかにもいろいろファイルやらフォルダやらでてきますが、ドキュメントだったり
サンプルだったりするので参考にするとよいと思います。

以下は簡単な使用例になります。

<title>table sort</title>



$(function(){
        $('#sorter').tablesorter();
});




<table border="1" id="sorter">
<thead>
<tr>
        <th>row1</th>
        <th>row2</th>
        <th>row3</th>
        <th>row4</th>
</tr>
</thead>
<tbody>
<tr>
        <td>test1-1</td>
        <td>test3-2</td>
        <td>test3-3</td>
        <td>test3-4</td>
</tr>
<tr>
        <td>test2-1</td>
        <td>test2-2</td>
        <td>test2-3</td>
        <td>test1-4</td>
</tr>
<tr>
        <td>test3-1</td>
        <td>test1-2</td>
        <td>test1-3</td>
        <td>test2-4</td>
</tr>
</tbody>
</table>

<title>table sort</title>

$(function(){

$('#sorter').tablesorter();

});

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

ここで注意すべき点はtheadタグを付け忘れるとうまくいかない可能性があるので忘れないこと。
それと、先頭行のtheadタグの中身はthタグでなくてはいけないこと。
/