jQuery の tablesorter プラグイン blue テーマ

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

jQuery の tablesorter プラグインを使い、列の値を基準に、項目を並べ替えられる表（テーブル）において、「jquery.tablesorter.zip」に含まれている「blue」テーマを使った実装例（サンプル）。

実装例（サンプル）

商品名	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つを、さらに「評価」に基づいて並べ替える。
並べ替えの基準にした列の見出しの背景色は、　この色　に変わる。複数の列を基準にしたときは、複数の見出しの背景色が、　この色　に変わる。

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

読み込み

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

<link rel="stylesheet" type="text/css" href="tablesorter/themes/blue/style.css" />
<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" class="tablesorter">
<thead>
<tr>
<th>商品名</th>
<th>id</th>
<th>値段</th>
<th>評価</th>
<th>デザイン</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, プラグイン, 表パーマリンク