jQueryでテーブルソート！tablesorterの使い方／オプション

テーブル（table）をソートしたい時。

jQueryには超便利なプラグインがあります。

その名も tablesorter というプラグイン

かなり便利で使いやすかったので、
この tablesorter の使い方／オプションをメモします。

このページの目次

tablesorterでテーブルソートする基本手順
実際の tablesorter の見た目やソート動作例
テーブルソートなら tablesorter がたぶん一番

tablesorterでテーブルソートする基本手順

１．まずtablesorterをダウンロード・読込

まずプラグインをGitHubからダウンロード

GitHub

Mottie/tablesorter

https://github.com/Mottie/tablesorter

Github fork of Christian Bach's tablesorter plugin + awesomeness ~ - Mottie/tablesorter

zipダウンロードなどしたら解凍。

読込が必要なのは次の２つのファイルです。

▼ distディレクトリにあるこのファイル

js/jquery.tablesorter.min.js
css/theme.default.min.css

▼ ヘッダまたはフッターで読み込みしておく

<script src="jquery.tablesorter.min.js"></script>
<link rel="stylesheet" href="theme.default.min.css">

1 2	<script src="jquery.tablesorter.min.js"></script> <link rel="stylesheet" href="theme.default.min.css">

ただし theme.*.min.css はテーマファイルなので必須ではありません。デフォルトだとちょっとダサい感じなので、そこは好きなテーマを選んでみてください。

最低限はJSファイルの方だけでOK。

２．ソート対象のテーブル(table)をHTML定義

ここでは次のテーブルを想定します。

駄菓子リストを表示したい
カラムはオススメ度、名前、値段
オススメ度／名前／値段でソート

こういった感じの table をHTML定義することに。

最低限のテーブル構造はこうなりました。

▼ 用意したテーブルHTMLの例

<table id="dagashi">
<thead>
<tr>
<th>おすすめ度</th>
<th>名前</th>
<th>値段</th>
</tr>
</thead>
<tbody>
<tr>
<td>☆★★★★</td>
<td>ウマい棒</td>
<td>10円</td>
</tr>
<tr>
<td>☆☆☆★★</td>
<td>チョコバット</td>
<td>30円</td>
</tr>
<tr>
<td>★★★★★</td>
<td>キャベツ太郎</td>
<td>20円</td>
</tr>
</tbody>
</table>

<thead>

<tr>

<th>おすすめ度</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

<td>チョコバット</td>

</tr>

<tr>

<td>キャベツ太郎</td>

</tr>

</tbody>

</table>

テーブル定義のポイントは次の３つ

theadタグが必須
かならず必要なので忘れないこと。このthead内のth要素がクリックされたとき、その下に並んでいるtd要素が昇順／降順でソートされることになる
tbodyタグも必須
こちらも必ず必要。ここに含まれる td要素ないのテキストがソート対象になる。ちなみにテキスト以外なら装飾用タグを含めても大丈夫
テーマについて
もしデフォルト以外を使用しているならtable要素に tablesorter-* のクラスを指定。例えば theme.blue を使用しているなら class="tablesorter-blue" のように指定する。

必ずヘッダーが必要なことに注意ですね。

ひとまずHTMLタグ的な注意点はこれだけです。

３．テーブルをtablesorterで初期化させるコード追加

最後に次のようなコードを追加すればOK

$(function(){
  $('#dagashi').tablesorter({
    headers: {
      0: { sorter: "text"}, /// => テキストとしてソート
      1: { sorter: "text"}, /// => テキストとしてソート
      2: { sorter: "digit"} /// => 数値としてソート
    }
  });
});