HTMLで作ったテーブルにソート機能を追加する「Tablesorter」の使い方

サムネイル jQuery

今回はHTMLで作ったテーブルにソート機能を追加するjQueryプラグイン「Tablesorter」の使い方を解説します。

Tablesorterでは以下を昇順・降順で並び替えることができます。

  • ひらがな
  • カタカナ
  • アルファベット
  • 数字
  • 日付など

 

ただ、漢字のソート機能はあまり期待できないので注意しましょう。

もし漢字をどうしてもソートしたいなら、「手動で」番号を振ることでその番号に基づいてソートすることができます。詳しくは後述。

 

まずはデモをどうぞ。テーブルのヘッダーをクリックするとソートします。

ひらがな、アルファベット、日付などが昇順・降順にソートされているのが確認できると思います。

番号ID名前名前(かな)誕生日
2bbb田中たなか3/24
5dud青木あおき5/9
1ake佐藤さとう1/21
3clw山田やまだ2/4
4eruもり4/16

 

では使い方を紹介します。

 

スポンサーリンク

1:Tablesorterを読み込む

プラグインを読み込む場合は基本的にCDN経由で読み込むのがおすすめです。今回もCDNで読み込みます。

cdnjsにTablesorterがあがっているので引っ張ってきましょう。先にjQuery本体を読み込むのを忘れずに!

 

面倒な人は以下をコピペ↓

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.min.js">

 

また、漢字をソートできるようにしたい人は以下の「jquery.metadata.min.js」も読み込んでください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/extras/jquery.metadata.min.js">

 

これでTablesorterの読み込みはokです。

 

また、テーブルのデザインを整えるCSSもCDNで配布されています。

使用方法は後述します。まずはテーブルを作ってから。

 

2:HTMLでテーブルを作成

HTMLの<table>タグを使ってテーブルを作ります。

この時注意するのが、<thead>タグと<tbody>タグを使ってテーブルを作るという点です。

Tablesorterは<thead>タグにソート機能を追加するので、<thead>タグを持ったテーブルを作るようにしてください。

 

また、テーブルの<table>タグにclass="tablesorter"を追加してください。これでソート機能が使えるようになります。

スクリプトを実行する際、わかりやすいようにidも一緒に指定しておくといいと思います。

<table class="tablesorter" id="myTable">
	<thead>
		<tr>
			<th>番号</th>
			<th>ID</th>
			<th>名前</th>
			<th>名前(かな)</th>
			<th>誕生日</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2</td>
			<td>bbb</td>
			<td>田中</td>
			<td>たなか</td>
			<td>3/24</td>
		</tr>
		<tr>
			<td>5</td>
			<td>dud</td>
			<td>青木</td>
			<td>あおき</td>
			<td>5/9</td>
		</tr>
		<tr>
			<td>1</td>
			<td>ake</td>
			<td>佐藤</td>
			<td>さとう</td>
			<td>1/21</td>
		</tr>
		<tr>
			<td>3</td>
			<td>clw</td>
			<td>山田</td>
			<td>やまだ</td>
			<td>2/4</td>
		</tr>
		<tr>
			<td>4</td>
			<td>eru</td>
			<td>森</td>
			<td>もり</td>
			<td>4/16</td>
		</tr>
	</tbody>
</table>

 

3:Tablesorterスクリプトを実行

「tablesorter.js」みたいなファイルを自分で作って、そこにTablesorterを実行するスクリプトを記述します。

スクリプト自体は超簡単で、tablesorter()関数を実行するだけです。

 

$(document).ready(function() { 
	$("#myTable").tablesorter();
});

 

このスクリプトを記述したファイルをHTMLで読み込めば、ソート機能が使えるようになるはずです。

テーブルのヘッダーをクリックするとソートされます。

ソートできていない場合は、<table class="tablesorter">となっているか、スペルミスはないかなど確認してみてください。

 

4:スタイルを調整

パッと見ソートできるテーブルというのがわかりづらいので、CSSで簡単にスタイルを調整します。

以下の部分を調整しておきましょう。

  • クリック時の青いハイライトを消す
  • カーソルの形を視覚的にわかりやすくする
  • 「▼」でソートをわかりやすくする
#myTable .tablesorter-header {
	cursor: pointer;
	outline: none;
}
#myTable .tablesorter-header-inner::after { 
	content: '▼';
	font-size: 12px;
	margin-left: 5px;
}

 

ハイライトが出る箇所は.tablesorter-headerクラス(<thead>内の<th>の部分)なので、そこにスタイルを指定します。

また、Tablesorterを使うとテーブル内の<th>の中に<div class="tablesorter-header-inner">というタグが自動で作成されます。

これに::afterで「▼」を表示することでソート機能を強調しています。

これでテーブルにソート機能があるということがわかりやすくなりました。

 

オプション

一応上記で基本的なTablesorterの使い方は終わりですが、オプションがいくつか用意されているので見ていきましょう。

 

CDNでテーマCSSを読み込む

Tablesorterにはテーブルのスタイルを整えてくれるCSSがいくつかCDNで配布されています。

スタイルはテーマ一覧から確認できます。

 

CSSを適用する場合は

  1. CSSを読み込み
  2. クラス名を<table class=”tablesorter-テーマ名”>にする

というようにします。

 

これらのCSSはcdnjsから探しましょう。

ごちゃごちゃしててわかりにくいですが、「/css/theme.テーマ名.min.css」となっているのがテーマのCSSです。「command + F」で「min.css」みたいに検索をかけるとハイライトされてわかりやすくなります。

画像1

 

例えばテーマを「ice」にしたいなら、そのCSSを先に読み込んでしまいます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/css/theme.ice.min.css">

 

次に<table class="tablesorter-ice">とクラス名を指定すれば、これだけでiceテーマのテーブルが完成します。簡単ですね。

 

漢字をソートさせる

Tablesorterの標準機能では漢字まではうまくソートさせることができません。

しかし、手動で数字を振れば漢字でも意図した通りにソートさせることができます。

 

やり方としては、まず以下の「jquery.metadata.min.js」を読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/extras/jquery.metadata.min.js">

 

次に漢字の列の<th>を以下のように記述します。

今回は名前の列をきちんとソートさせたいので、<thead>内の名前見出しに以下のように追加しました。'metadata'はシングルクオーテーションで囲むのを忘れずに。

また、関係ない見出しにこれを書くとソートが正しく動作しなくなります。必要な部分にだけ記述するようにしてください。

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

 

次にテーブルの<td>を以下のように記述します。こちらは行の全てに追加してください。

<td class="{sortValue: 1}">青木</td>

 

これでokです。

sortValueに記述した数字がソートの基準となります。

 

最初のテーブルの漢字の名前もこのやり方でソートできるようにしてみます。50音に対応する数字を当ててみました。

 

<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>

 

番号ID名前名前(かな)誕生日
2bbb田中たなか3/24
5dud青木あおき5/9
1ake佐藤さとう1/21
3clw山田やまだ2/4
4eruもり4/16

 

漢字も{sortValue}に当てた数字を基準としてソートしているのが確認できます。

もちろん、漢字以外でも意図した通りにソートさせることができます。手動になってしまうのが難点ですね。

 

特定の列だけソート機能を外す

特定の列だけソート機能を外す場合は、Tablesorterを実行するスクリプトにheadersオプションを記述します。

 

$(document).ready(function(){ 
	$("#myTable").tablesorter({
		headers: {
			0: { sorter: false },
			1: { sorter: false }
		}
	});
});

headers:{}の中にある数字は、「左から数えた列の番号」です。

今回なら左から0、1番目の「番号」と「ID」のソート機能が無効になります(0番目から数えます)

また、カンマで区切って複数指定も可能です。

 

番号ID名前名前(かな)誕生日
2bbb田中たなか3/24
5dud青木あおき5/9
1ake佐藤さとう1/21
3clw山田やまだ2/4
4eruもり4/16

 

番号とIDはクリックしてもソートしないのが確認できます。

 

最初からソートした状態にしておく

テーブルが最初に読み込まれた時はHTMLに書いてある順に表示されていますが、最初からソートした状態で画面を表示することもできます。

 

$("#myTable").tablesorter({
	sortList: [[4, 0]]
});

 

sortListオプションで最初からソートしておく列(第1引数)と、昇順・降順(第2引数)を指定します

上の場合は第1引数が4なので、左から5列目(列は0番目から数えます)、つまり「誕生日」の列を指定しています。

また、第2引数は昇順なら0、降順なら1を指定します。

つまり、今回の場合なら左から5列目を昇順でソートしてある状態にしています。

 

以下のテーブルはページが読み込まれた時から「誕生日」の列が昇順でソートされています。

 

番号ID名前名前(かな)誕生日
2bbb田中たなか3/24
5dud青木あおき5/9
1ake佐藤さとう1/21
3clw山田やまだ2/4
4eruもり4/16

 

また、最初からソートした状態にしたい列を[]内でカンマで区切れば複数指定することも可能です。

 

$("#myTable").tablesorter({
	sortList: [[2, 1],[4, 0]]
});

 

この場合、左から3番目の列は降順、左から5番目の列は昇順でソートされた状態でページが読み込まれます。

まとめ

HTMLテーブルにソート機能を追加するjQueryプラグイン「Tablesorter」を紹介しました。

ソートてきるテーブルは使う側からしても使いやすいですからね。

こういうプラグインは割と少ない感じがするので、ソート機能が必要になった時に便利ですね。

導入も簡単なのでぜひ使ってみてください。