jQuery の tablesorter プラグイン

投稿日: 2011年7月26日 作成者: alphasis

jQuery の tablesorter プラグインの、導入方法、使い方、CSSテーマ、オプションなどについて。jQuery の tablesorter プラグインは、表（テーブル）の列の見出しをクリックすることで、その列の値を基準に、行を並べ替えることができるようにするプラグイン。

導入

jQuery plugin: Tablesorterより、「 jquery.tablesorter.zip 」をダウンロード。

解凍すると、複数のファイルが現れるが、下の実装例（サンプル）のように、並べ替えるだけなら、「jquery.js」と「jquery.tablesorter.js」だけで動作する。

実装例（サンプル）

商品名 ⥮ id ⥮ 値段 ⥮ 評価 ⥮ デザイン ⥮
Ａ商品 2256 8800 54 73
Ｂ商品 2011 5900 71 52
Ｃ商品 7025 15000 97 100
Ｄ商品 1023 8800 62 63
Ｅ商品 5123 8800 62 73

実装例（サンプル）について

実装例（サンプル）のソースコードについては、こちら。

tablesorter プラグインの使い方

基本

「jquery.tablesorter.js」を読み込み、「JavaScript」と「HTML」を下記のように書く。

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-tablesorter-table' ) . tablesorter();
} );
// -->
</script>

HTML

「thead」と「tbody」タグを含める必要があるようだ。

<table id="jquery-tablesorter-table">
<thead>
<tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
</tr>
</thead>
<tbody>
<tr>
    <td>項目1</td>
    <td>項目1</td>
    <td>項目1</td>
</tr>
<tr>
    <td>項目2</td>
    <td>項目2</td>
    <td>項目2</td>
</tr>
</tbody>
</table>

CSSテーマ

「 jquery.tablesorter.zip 」には、「blue」テーマと「green」テーマが含まれている。「themes/blue/」フォルダに、「blue」テーマのCSSファイルと画像ファイルがあり、「themes/green/」フォルダに、「green」テーマのCSSファイルと画像ファイルがある。

テーマを読み込み、「table」タグのクラスに、「tablesorter」を追加すると使える。

HTML

<table id="jquery-tablesorter-table" class="tablesorter">
<thead>
<tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
</tr>
</thead>
<tbody>
<tr>
    <td>項目1</td>
    <td>項目1</td>
    <td>項目1</td>
</tr>
<tr>
    <td>項目2</td>
    <td>項目2</td>
    <td>項目2</td>
</tr>
</tbody>
</table>

オプション

よく使うオプション。

headers

特定の列に対してオプションを指定することができるオプション。

一部の列の並べ替えを無効にしたいときなどに使う。

sortList

ページ読み込み時の並び替え基準を指定するオプション。

sortMultiSortKey

複数の列を基準とした並べ替え（マルチソート）を行うときの操作キーを設定するオプション。

widgets

奇数行と偶数行の背景色を色分けするときなどに使用。

sortForce

優先並べ替え基準にする列を指定するオプション。

スポンサード リンク

カテゴリー: JavaScript, jQuery, tablesorter, プラグイン, 表 パーマリンク