tablesorter と Pager プラグインで表の内容を複数ページに分ける

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>

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>

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

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>

スポンサード リンク

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