jQuery の tablesorter プラグインの「blue」テーマを使った、列の値を基準に、項目を並べ替えられる表(テーブル)において、表(テーブル)の内容を複数ページに分けて表示する方法。複数ページに分けるには、「Pager」プラグインを併用する。
「Pager」プラグインも、「 jquery.tablesorter.zip 」に含まれている。「addons/pager/」フォルダ内にある。
実装例(サンプル)
商品名 | id | 値段 | 評価 | デザイン |
---|---|---|---|---|
A商品 | 2256 | 8800 | 54 | 73 |
B商品 | 2011 | 5900 | 71 | 52 |
C商品 | 7025 | 15000 | 97 | 100 |
D商品 | 1023 | 8800 | 62 | 63 |
E商品 | 5123 | 8800 | 62 | 73 |
実装例(サンプル)の動作について
- ボタンを押すと最初のページを表示する。
- ボタンを押すと前のページを表示する。
- ボタンを押すと次のページを表示する。
- ボタンを押すと最後のページを表示する。
- で、1ページに表示する項目数を選択できる。
- 表の列の見出し(「商品名」「ID」「値段」「評価」「デザイン」)をクリックすると、その列の値を基準に、商品を並べ替える。昇順の列は降順に並べ替え、降順の列は昇順に並べ替え、昇順でも降順でもない列は昇順に並べ替える。
- 列の見出しにある「」が、昇順で並べたときは「」に変わり、降順で並べたときは「」に変わる。
- 「値段」で並べ替えた後、キーボードの「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>
<script type="text/javascript" src="addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript" src="addons/pager/jquery.tablesorter.pager.js"></script>
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-tablesorter-table' ) . tablesorter( {
widgets: ['zebra']
} );
jQuery( '#jquery-tablesorter-table' ) . tablesorterPager( {
container: jQuery( '#jquery-pager' ),
size: 3,
positionFixed: false
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-tablesorter-table' ) . tablesorter( {
widgets: ['zebra']
} );
jQuery( '#jquery-tablesorter-table' ) . tablesorterPager( {
container: jQuery( '#jquery-pager' ),
size: 3,
positionFixed: false
} );
} );
// -->
</script>
「size: 3」初回表示時の1ページに表示する項目数を3に設定している。
CSS
<style>
<!--
#jquery-tablesorter-table {
width: 500px !important;
margin: 0 !important;
}
#jquery-tablesorter-table th {
color: #333333 !important;
padding: 0.5em 1em !important;
}
#jquery-tablesorter-table td {
color: #333333 !important;
padding: 0.5em 1em 0.5em 2em !important;
}
#jquery-tablesorter-table th, #jquery-tablesorter-table td {
border: 1px solid #d1d1d1;
}
#jquery-pager form {
margin: 0 !important;
}
#jquery-pager input {
font-size: 13px;
}
-->
</style>
<!--
#jquery-tablesorter-table {
width: 500px !important;
margin: 0 !important;
}
#jquery-tablesorter-table th {
color: #333333 !important;
padding: 0.5em 1em !important;
}
#jquery-tablesorter-table td {
color: #333333 !important;
padding: 0.5em 1em 0.5em 2em !important;
}
#jquery-tablesorter-table th, #jquery-tablesorter-table td {
border: 1px solid #d1d1d1;
}
#jquery-pager form {
margin: 0 !important;
}
#jquery-pager input {
font-size: 13px;
}
-->
</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>A商品</td>
<td>2256</td>
<td>8800</td>
<td>54</td>
<td>73</td>
</tr>
<tr>
<td>B商品</td>
<td>2011</td>
<td>5900</td>
<td>71</td>
<td>52</td>
</tr>
<tr>
<td>C商品</td>
<td>7025</td>
<td>15000</td>
<td>97</td>
<td>100</td>
</tr>
<tr>
<td>D商品</td>
<td>1023</td>
<td>8800</td>
<td>62</td>
<td>63</td>
</tr>
<tr>
<td>E商品</td>
<td>5123</td>
<td>8800</td>
<td>62</td>
<td>73</td>
</tr>
</tbody>
</table>
<thead>
<tr>
<th>商品名</th>
<th>id</th>
<th>値段</th>
<th>評価</th>
<th>デザイン</th>
</tr>
</thead>
<tbody>
<tr>
<td>A商品</td>
<td>2256</td>
<td>8800</td>
<td>54</td>
<td>73</td>
</tr>
<tr>
<td>B商品</td>
<td>2011</td>
<td>5900</td>
<td>71</td>
<td>52</td>
</tr>
<tr>
<td>C商品</td>
<td>7025</td>
<td>15000</td>
<td>97</td>
<td>100</td>
</tr>
<tr>
<td>D商品</td>
<td>1023</td>
<td>8800</td>
<td>62</td>
<td>63</td>
</tr>
<tr>
<td>E商品</td>
<td>5123</td>
<td>8800</td>
<td>62</td>
<td>73</td>
</tr>
</tbody>
</table>