TablesorterでHTMLの表をソート(並び替え)可能にする

table要素で作った表にもソート(並べ替え)機能を加えたい！

ウェブ上に表形式で何らかのデータを掲載する場合、Excelなどの表計算ソフトと同様にソート(並べ替え)したいと思うこともあるでしょう。

例えば、右図のように都道府県別のデータを掲載する場合は、五十音順に並べ替えたり、位置(北側から南側へ)を基準に並べ替えたり、または各数値データの多い順・少ない順に並べ替えたり、様々に並べ替えられると便利です。

しかし、ウェブ上にtable要素を使って掲載した表は、そのままでは並べ替えられません。どうしても並べ替えたい場合には、閲覧者が自ら表をコピーしてExcel等の表計算ソフトに貼り付けるくらいしか方法がありませんでした。

ウェブ上に掲載されている表にも、表計算ソフトと同じようにソート機能が付いていると便利ですよね。

ウェブ上の表にソート(並べ替え)機能を加えられる「Tablesorter」

そこで便利なのが、jQueryで作られた「Tablesorter」というスクリプトです。

この「Tablesorter」スクリプトを使うと、table要素で作られた表に対して、とても簡単にソート機能を加えられます。スクリプトのファイルサイズは小さく、動作も軽快です。

表示例は下図の通りです。先頭行の各列に「▲▼」の矢印記号が付加されており、閲覧者がそこをクリックすると、その項目を基準にして行が並び替わります。


実際にどのように動作するかは、サンプルページを用意していますので実際にブラウザで閲覧してみて下さい。表のタイトル行部分をクリックすると、上図のようにその列を降順・昇順で並べ替えることができます。クリックすると一瞬で並び替わることがお分かり頂けるでしょう。

今回は、ウェブ上にtable要素で作られた表にソート機能を加えたいときに便利なスクリプト「Tablesorter」の設置方法と使い方(記述方法)をご紹介いたします。

それではまずは、「Tablesorter」スクリプト一式をダウンロードして、必要なファイルを自サイト上にアップロードしましょう。