WordPressプラグイン「Table Sorter」が便利

シェアする

スクリーンショット 2015-12-19 11.29.05

WordPressでテーブルの並び替えをしたいなあという場面がありまして、調べてみると「Table Sorter」というプラグインがありましたので、簡単に使い方をまとめたいと思います。

極力プラグインは入れたくない!という方は、通常のjQueryのプラグインでも導入ができます。

jQueryプラグイン:
Tablesorter 2.0

スポンサーリンク
レクタングル大

プラグインをインストール

まずは通常のプラグインと同じくWordpressにインストールし、有効化します。

Table Sorterの使い方

Table Sorterの使い方はシンプルですが、現状英語でのインストラクションしかなく、少し分かりづらいため、個人的には用意されているDEMOなどを見て実装する必要がありました。

以下がDEMOで用意されているコードになります。

<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th class="sortless">Sortless</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Khan</td>
<td>Farhan</td>
<td>farhan@test.com</td>
<td>$50.00</td>
<td>Lorem</td>
<td>http://www.test.com</td>
</tr>
<tr>
<td>Iqbal</td>
<td>Kamran</td>
<td>kamran.cheff@yahoo.com</td>
<td>$50.00</td>
<td>Ipsum</td>
<td>http://www.kamrancheff.com</td>
</tr>
<tr>
<td>Rana</td>
<td>Usman</td>
<td>usman@hotmail.com</td>
<td>$100.00</td>
<td>Dollar</td>
<td>http://www.usmanrana.com</td>
</tr>
<tr>
<td>Iqbal</td>
<td>Hassan</td>
<td>hassan@earthlink.net</td>
<td>$50.00</td>
<td>Sit</td>
<td>http://www.hassaniqbal.com</td>
</tr>
</tbody>
</table>

実装方法は以下のように説明されています。

. THEAD and TBODY tags are compulsory in the desired table, otherwise this plugin will not work.
2. Add tablesorter class in the desired TABLE tag.
3. For column heading, use TH tag within THEAD tag.
4. If you want to exclude a particular column, add sortless class to that TH tag.

意訳すると以下のようになります。

1. THEADTBODY タグは必要。タグがない場合は動作しない
2. tablesorterクラスをテーブルタグに付ける
3. 行データのタイトルは、THEADタグで囲み、それぞれのデータにTHタグを使用する必要がある
4. 特定の列に並び替えを適用したくない場合は、THタグにsortlessクラスを付ける

私は上のコードを参考にtableを組みました。

難点

初期状態は昇順・降順の指定ができるのですが、例えば昇順のみの並び替えをしたい場合などはできない点が少し気になります。

ただ、jQUeryの導入が苦手な私のような人間にとってはプラグインでやってしまったほうが早くて有難いです。

スポンサーリンク
レクタングル大
レクタングル大

シェアする

フォローする