HTMLタグの用意とソート処理
Tablesorterは、tableタグのヘッダー部分とテーブルボディ部分さえ定義されていれば、簡単にソート処理を実現できます。ヘッダー部分は thタグではなく、theadタグで囲まれた部分です。同様に、テーブルボディ部分は tbody タグで囲まれた部分になります。theadタグと tbodyタグが存在しない場合にはTablesorterは機能しません。必ず設定してください。
tableタグにはスタイルシートクラス名「tablesorter」を指定し、jQueryでアクセスしやすいようにID名「booklist」をつけます。ここまでのHTMLは以下のようになります。
<table id="booklist" class="tablesorter">
<thead>
<tr><th>写真</th><th>書店名</th><th>ジャンル</th><th>最寄駅</th><th>住所</th></tr>
</thead>
<tbody>
<tr><th width="72"><img src="images/shop/thumb/1b.jpg" width="72" height="36" alt="NADiff A/P/A/R/T"></th>
<td>NADiff A/P/A/R/T</td>
<td>アート/デザイン</td>
<td>恵比寿</td>
<td>渋谷区恵比寿1-18-4</td></tr>
<tr><th><img src="images/shop/thumb/2b.jpg" width="72" height="36" alt="SHIBUYA BOOKSELLERS"></th>
<td>SHIBUYA BOOKSELLERS</td>
<td>アート/デザイン</td>
<td>渋谷/代々木八幡</td>
<td>渋谷区神山町17-3 </td></tr>
<tr><th><img src="images/shop/thumb/3b.jpg" width="72" height="36" alt="ブックファースト新宿店"></th>
<td>ブックファースト新宿店</td>
<td>総合</td>
<td>新宿</td>
<td>新宿区西新宿1-7-3</td></tr>
<!-- 中略 -->
</tbody>
</table>
これでHTMLタグの準備は終わりです。次にスクリプトを作成します。といっても非常に簡単で、ソート対象のテーブルを指定して tablesorter()メソッドを呼び出すだけです。特に細かいオプションを指定しなくても自動的にテーブルヘッダーに画像や色などが追加され、クリックしてソートできるようになります。
$("#booklist").tablesorter();
このスクリプトを外部jsファイル「booklist.js」に記述します。記述する場所は特に決まっていませんが、作例では第24回で取り上げた「ラバランプ型メニュー」（関連記事）処理の次に追記しました。
最初からソートしたい場合は……
本文で紹介した方法で基本的なソートはできるようになりましたが、場合によっては最初からテーブルの中身をソートして出したいこともあるでしょう。Tablesorterには、最初からソートした状態で表示する機能もあります。
使い方は簡単で、以下のように sortListオプションに配列形式で、どの列をソートするかを指定します。
$("#booklist").tablesorter({
sortList: [[1,0]]
});
[1,0]の 1 は、「左から2番目の列」を示します。一番左側の列が0で、順に1、2、3……となります。[1,0]の 0 は、「昇順にソート」を示しています。1 を指定すると降順にソートされます。たとえば、3番目の列を降順にソートして表示したい場合は、sortList: [[2,1]] とすればよいことになります。
