tableのソートが簡単にできるプラグイン【tablesorter.js】のメリットと使い方！

【tablesorter.jsってなに？】

表組み（table要素使用）のデータを並び替える際にとても便利です。

【tablesorter.jsの4つのメリット】

導入がとっても簡単

既存のデザインやHTMLのソースに影響を与えないような実装が可能

オプション設定で自由にカスタマイズ

Wordpressにも導入可能

【tablesorter.jsのレシピ】

▼必要な材料

jQuery本体

jquery.tablesorter.min.js

基本的にはこの2つだけ。この2つをHTML上で読み込みます。

デザイン用のcssを設定したい時はCSSのテーマも読み込みます。

jquery.metadata.min.js

漢字をソートしたい時に読み込みます。

▼材料を揃える

1. データ一式をダウンロード

zipを解凍し、必要なファイルのみ使用します。

/tablesorter-master/dist/js/jquery.tablesorter.min.js

/tablesorter-master/dist/js/extras/jquery.metadata.min.js

2. CDN経由で読み込む

code:jquery.tablesorter.min.js

code:jquery.metadata.min.js

▼ソート機能つきのテーブルができあがるまでの手順

1. JSファイルの読み込む

HTML上で、JSファイルを読み込ませます。

<jQuery本体>　→本体は一番最初

<jquery.tablesorter.min.js>　→ソートのプラグイン

<cmn.js>など共通のJSもしくはtablesorter.js用のJS　→tablesorter()を走らせます

2. ソートさせたいテーブルが<thead>タグと<tbody>タグを使って作られているか確認

tablesorterは<thead>タグにソート機能を追加します。

なので<thead>タグを使用してテーブルを作るようにしてください。

3. ソートさせたいtable要素に、「class="tablesorter"」と任意のID属性を追加

<table class="tablesorter" id="table_sort">

code:index.html

<table class="tablesorter" id="table_sort">

<thead>

<tr>

<th>ID</th>

<th>社員番号</th>

<th>名前</th>

<th>名前（かな）</th>

<th>入社日</th>

</tr>

</thead>

<tbody>

<tr>

<td>N</td>

<td>60056</td>

<td>出次樽亜衣子</td>

<td>でじたるあいこ</td>

<td>8/1</td>

</tr>

<tr>

<td>F</td>

<td>30248</td>

<td>山崎義男</td>

<td>やまざきよしお</td>

<td>3/3</td>

</tr>

<tr>

<td>A</td>

<td>150389</td>

<td>樋口洋子</td>

<td>ひぐちようこ</td>

<td>10/1</td>

</tr>

<tr>

<td>V</td>

<td>744530</td>

<td>安藤花子</td>

<td>あんどうはなこ</td>

<td>1/4</td>

</tr>

<tr>

<td>D</td>

<td>032788</td>

<td>田中太郎</td>

<td>たなかたろう</td>

<td>5/10</td>

</tr>

</tbody>

</table>

4. tablesorterスクリプトを実行

tablesorterを実行するスクリプトを記述して、ソートしたいテーブルがあるHTMLで読み込ませるだけ。

tablesorter()関数を走らせて、classに「.table_sort」を持ったテーブルにソート機能を追加するという記述です。

code:js

$(document).ready(function() {

$(".table_sort").tablesorter();

});

ソートだけしたい場合は、上記の記述のみでOK。

code:tablesorter.js

$(document).ready(function(){

$(".table_sort").tablesorter({

textExtraction: function(node){

var attr = $(node).attr('data-value');

if(typeof attr !== 'undefined' && attr !== false){

return attr;

}

return $(node).text();

}

});

});

漢字のテキストもソートさせてたい場合は、<td>にdata-value（ソート用の値）を設定します。

その際に、「textExtraction〜」より下の部分の記述が必要になります。

これで、漢字を含む列も正しく五十音順にソートさせることができます。

5. スタイルを設定

tablesorterには、既成のCSSのテーマが存在します。

お好きなスタイルのテーマCSSを、ソートしたいテーブルがあるHTMLで読み込むことで、テーブルにスタイルがあたるようになっています。

tablesorterを使用すると、<thead>内の<th>の部分に、「tablesorter-header」というclassが付与されるようになっているので、「.tablesorter-header」にスタイルを指定します。

<th>の部分をクリックし、ソートを実行すると、<th>の「tablesorter-header」に「tablesorter-headerDesc」(デフォルトが降順指定の場合)、「tablesorter-headerAsc」(デフォルトが昇順指定の場合)のclassがさらに付与されます。

矢印アイコン「▼」「▲」をつけたい場合は、

「tablesorter-headerDesc」「tablesorter-headerAsc」に:before要素と:after要素を使って「▼」「▲」を設置するか、

「tablesorter-header-inner」に:after要素を使って「▼」「▲」を設置するか、

などの手段で、ソート機能を強調するようなスタイルをあてることも可能です。

（CSSの例はサンプルをご参照ください。）

6. オプションを設定

この先は、できあがったソート機能にオプションを追加し、ソートされるデータの仕様にあった、お好みののソート機能に仕上げていくための手順になります。

tablesorter.jsのオプションは、HTML側で設定することも、JS側で設定することも可能です。

table:HTML側で設定するオプション

オプション　　 機能 設定する値　　 記述例　　　　　　　　　　　　　

data-sort-initial-order 最初にソートする方向 asc(昇順)、desc(降順) <th data-sort-initial-order="desc">ID</th>※1

data-sorter ソートが可能な列か true、false <th data-sorter="false">社員番号</th>※2

data-lockedorder ソート方向を固定　　　　　　 asc(昇順)、desc(降順)　 <th data-lockedorder="desc">※3

data-value 表記とは別のソート値を指定 平仮名、数字など <td data-value="たなかたろう">田中太郎</td>※5

HTML側で設定する場合は、<table>タグおよび<thead>内の<th>タグに設定が可能です。

<th>タグへのオプション設定は、列ごとに並び替え方法を変えて設定したい場合に便利です。

※1：このオプションが設定されている列は、「最初に降順でソートする」という指定。

※2：このオプションが設定されている列は、「ソートを無効にする」という指定。

※3：このオプションが設定されている列は、「降順に固定でソートする」という指定。

※5：漢字表記の値をソートしたい場合などに有効。「data-value=""」にソート専用の値を指定することができます。

<td>の中に書かれた値と、ソートしたい値が別々の時にソート専用の値を「data-value=""」に入れると、漢字も五十音順にソートさせることができます。

table:JS側で設定するオプション

オプション　　　　　　 機能　　　　　　　　　　　 設定する値　　　　 記述例　　　　　　　　　　　　　　　

JS側で設定する場合は、tablesorterを実行するスクリプトを記述している部分に記述を追加して設定します。

以下、記述例です。

code:js

$(document).ready(function() {

$(".table_sort").tablesorter({

headers: {

0: {sorter:false}

}

});

});

※1：「左から0番目の列（1列目）だけ、「ソートを無効にする」という指定。

※2：ソート順は、「0が昇順（小さい順）」「1が降順（大きい順）」。「左から4番目の列（5列目）は、最初から昇順にソートした状態にしておく」という指定。

7. 漢字をソートさせてみる

「jquery.metadata.min.js」を読み込む

code:jquery.metadata.min.js

sortValueに記述した数字は五十音順に対応する数字で、この数字がソートの基準となり、並び替えられます。

code:漢字ソート例

<thead>

<tr>

<th class="{sorter: 'metadata'}">名前</th>

…

</tr>

</thead>

<tbody>

<tr>

<td class="{sortValue: 16}">出次樽</td>

<td class="{sortValue: 1}">安藤</td>

<td class="{sortValue: 11}">田中</td>

<td class="{sortValue: 36}">山崎</td>

<td class="{sortValue: 35}">樋口</td>

</tr>

</tbody>

【サンプル】

https://gyazo.com/4c1ff1d5bcb4b2620ae7067a4c0e40c9

上記は画像なので、ソートできませんが、サンプルコード作っておりますので、URLよりご参照ください！

▼サンプルの詳細です

「かな」はソート無効

デフォルトはソートなし

最初のソートは降順

漢字のソートあり

CSSは自作

矢印は降順の時「▼」、昇順の時「▲」で切り替え

▼使用ステップと使用上の注意

2. jquery.tablesorter.min.jsを読み込む（漢字ソートの場合は、その下でjquery.metadata.min.jsを読み込む）

6. <table>タグに降ったidを指定してtablesorter()を走らせる

【おまけ：WordPressでも実装可能なtablesorter.js】

tablesorter をWordPressで適用するにはいくつかの方法があります。

管理画面からインストールして有効化

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、プラグイン追加画面右上の検索窓に「Table Sorter」と入力します。「今すぐインストール」しプラグインを有効化すれば完了です。

footer.phpもしくはheader.phpでプラグイン（JSファイル）を読み込み、function.phpに「$(document).ready(function() {

$(".table_sort")〜」の部分の処理を記述しスクリプトを実行

表示させるデータやソートの仕様、設定によっては、意図しないソート順になってしまう可能性もあるため、

どの方法がよいかは、実装時に確認が必要です。

【まとめ】

使用するJSファイルはたった2つとシンプル（漢字もソートする場合は3つ）

記述方法だけ注意すれば、短時間かつ複雑な処理を行わずにテーブルにソート機能をつけることが可能

（導入にあたる学習コストはかからない）

データの並び替えの仕様にあったソートを、オプションで設定することが可能

CSSのテーマも揃っているので、デザインがない時や簡易的にソート機能つきのテーブルを作成したい時に便利

ソート機能（JS）だけ読み込み、矢印や背景色などは自分で書いたCSSを使用することも可能

（後付けでテーブルにソート機能を付け足したい！となった場合にも、既存のテーブルデザインを崩すことなく実装が可能！こことってもすてき！）

オプションとCSS、JSでの処理の記述で、カスタマイズすれば、自由度の高いソート機能つきのテーブルの作成が可能な「tablesorter.js」プラグイン。

ソート機能つきのテーブルは、データを見る側使う側からしても使いやすく便利だなと思います！

おすすすめなのでぜひ使用してみてください \(*´꒳`*)/

次は滝口さんです٩( 'ω' )و