29分でできる！あのサイトの“技”を盗め ― 第26回

普通のtableタグを1行で動く表にするJSライブラリ

2009年06月02日 14時00分更新

文● 古籏一浩、ASCII.jp

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]] とすればよいことになります。

前へ 1 2 3 4 5 次へ

ツイートする