jQuery の tablesorter プラグインによる表（テーブル）の項目並べ替え

投稿日: 2011年7月26日作成者: alphasis

jQuery の tablesorter プラグインを使い、表（テーブル）の列の見出しをクリックすることで、その列の値を基準に、項目を並べ替える基本的方法。

実装例（サンプル）

商品名 ⥮	id ⥮	値段 ⥮	評価 ⥮	デザイン ⥮
Ａ商品	2256	8800	54	73
Ｂ商品	2011	5900	71	52
Ｃ商品	7025	15000	97	100
Ｄ商品	1023	8800	62	63
Ｅ商品	5123	8800	62	73

実装例（サンプル）の動作について

表の列の見出し（「商品名「ID」「値段」「評価」「デザイン」）をクリックすると、その列の値を基準に、商品が並べ変わる。
1度目のクリックは、昇順に並べ変わる。2度目のクリックは、降順に並べ変わる。
「値段」で並べ替えた後、キーボードの「Shift」キーを押したまま、「評価」をクリックすると、「値段」が同じ商品だけ、さらに「評価」を基準に並べ替える。この例の場合、8800円の商品3つを、さらに「評価」に基づいて並べ替える。

実装例（サンプル）のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>

JavaScript

<script>

</script>

CSS

<style>

</style>

HTML

<table id="jquery-tablesorter-table">
<thead>
<tr>
<th>商品名 <span>⥮</span></th>
<th>id <span>⥮</span></th>
<th>値段 <span>⥮</span></th>
<th>評価 <span>⥮</span></th>
<th>デザイン <span>⥮</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Ａ商品</td>
<td>2256</td>
<td>8800</td>
<td>54</td>
<td>73</td>
</tr>
<tr>
<td>Ｂ商品</td>
<td>2011</td>
<td>5900</td>
<td>71</td>
<td>52</td>
</tr>
<tr>
<td>Ｃ商品</td>
<td>7025</td>
<td>15000</td>
<td>97</td>
<td>100</td>
</tr>
<tr>
<td>Ｄ商品</td>
<td>1023</td>
<td>8800</td>
<td>62</td>
<td>63</td>
</tr>
<tr>
<td>Ｅ商品</td>
<td>5123</td>
<td>8800</td>
<td>62</td>
<td>73</td>
</tr>
</tbody>
</table>

カテゴリー: JavaScript, jQuery, tablesorter, プラグイン, 表パーマリンク