javascriptのテーブルソートライブラリ「Table Sorter」の設置方法メモ

覚え書き

導入が超簡単なテーブルソートライブラリ
Neil Fraser: Software: Table Sorter
を使ってみた。とっくに色んなサイトで紹介されてる様に便利で設置方法も超簡単。ただ、微妙に説明が足りてない*1気がしなくもないので、自分用メモも兼ねつつ設置方法をupしてみる。

手順

1.ライブラリをDL

ここからゲット。

2.読み込ませる

本家サイトでは

Download tablesort.js (8KB), then add this line anywhere in the body (not the head) of your page:

Neil Fraser: Software: Table Sorter

とあって、おそらく、「head要素内ではなくbody要素内にscript要素を置け」って書いてるんだと思うが、head要素に置いても問題無く動いた。あと、今更language属性もどうかと思ったので、普通に

<script type="text/javascript" src="tablesort.js"></script>

としたけどもちろん問題無し。

3.列見出しにclass属性を設定する

thead要素内のth要素もしくはtd要素に対して、

  • class="case"
    • アルファベット順でかつ大文字小文字もみる(大文字が優先される)。日本語でもひらがなやカタカナなら問題無く並べ替えられる(多分)。
  • class="nocase"
    • 単なるアルファベット順、大文字小文字はみない。日本語でもひらがなやカタカナなら問題無く並べ替えられる(多分)。
  • class="num"
    • 数値として並べ替える。

のいずれかのclass属性を、データの内容に応じて設定してやる。漢字等で並び替えようがない列には設定しなければok。

4.並べ替え状態を表す画像について

並べ替えの状態(昇順、降順)を表す画像(一番下はブランク画像)が提供されてるけど、

  • ↑
  • ↓

この程度なら、画像無しでも自動的に特殊文字の

  • &uarr;(↑)(降順)
  • &darr;(↓)(昇順)

が見出し横に表示されるので、別に使わなくてもいいかなと。むしろ、自分は、ライブラリ中の

// Default text values for the arrows.  Override these with custom image tags.
TableSort.arrowNone = ' &nbsp;';
TableSort.arrowUp   = ' &uarr;';
TableSort.arrowDown = ' &darr;';

の部分を

// Default text values for the arrows.  Override these with custom image tags.
TableSort.arrowNone = ' &nbsp;';
TableSort.arrowUp   = ' ▲';
TableSort.arrowDown = ' ▼';

に変えた。別の画像を使いたければ

// Default text values for the arrows.  Override these with custom image tags.
TableSort.arrowNone = ' &nbsp;';
TableSort.arrowUp   = ' <img src="別の上向き矢印画像のurl" alt="&uarr;">';
TableSort.arrowDown = ' <img src="別の下向き矢印画像のurl" alt="&darr;">';

みたく、適宜、imgタグの文字列に修正すればok。
これだけでtable要素がソート出来る様になる。うーん、ありがたい。

5.サンプル

な訳でサンプル。
生年月日の列が/で区切られてて数値として認識されないからか、正しく並べ替えられないのはご愛嬌。
気が向けば、この辺もちゃんと並び替えられる様にしてみよう…かな…(；^ω^)

参考にしたサイト

絶対お勧め！JavaScriptでテーブルソート·Table Sorter MOONGIFT
javascriptでソートが出来る表を作る

*1:紹介後に導入方法に変更が入ったとかかもしんないけど