Table Sorter：HTMLテーブルをソート可能なテーブルに変換できる
HTML テーブルをソート可能なテーブルに変換できる WordPress 用プラグインの紹介です。
それは「Table Sorter」です。
その導入手順から日本語化・使い方と設定などを解説していきます。
Table Sorter
Table Sorter は、HTML テーブルをソート可能なテーブルに簡単に変換できます。
- 複数列の並べ替え可（Shift キーを押しながら列ヘッダーをクリックすると複数の列を同時に並べ替え可）
- 特定の列を並び替え無効化
- クロスブラウザのサポート
記事を作成もしくは更新時点での Table Sorter のバージョン：2.2
マルチサイトでの利用:可
インストール手順
Table Sorter をインストールするには 2 種類の方法があります。
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化する。
Table Sorter – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面からインストールできます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Table Sorter」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
Table Sorter は、class を追加するだけなので日本語化を気にする必要も無いでしょう。
専用メニュー
管理画面の「ツール」メニューの中に追加されています。
使い方
前提条件：
THEAD 及び TBODY タグがテーブルに必須。
列見出しには、THEAD タグ内で TH タグを使用。
基本的には、ソートを可能にしたい TABLE タグに tablesorter クラスを追加。
特定の列をソート不可にするには、不可にしたい TH タグに sortless クラスを追加。
日付けで並び替えることも可能で、
日付列をソート可能にするには、日付列の見出しに dateFormat-dd/mm/yyyy クラスを追加します。
必要に応じて日付形式を変更することもできます。
デフォルトの並べ替えを指定することもできます。
HTML テーブルの classs 属性に以下の形式で指定します。
{sortlist：[[columnIndex, sortDirection],…]}
columnIndex:
列番号を指定します。
左から 0 で始まり、右へいくこどに 1 ずつ増やします。
sortDirection:
並び順を指定します。
昇順の場合は 0、降順の場合は 1 です。
最初に列 1、次に列 2 の順に昇順で並べ替えるには、以下のようにします。
{sortlist：[[0,0],[1,0]]}
コード例：
table id="myTable" class="tablesorter {sortlist：[[0,0],[1,0]]}"