jQueryでシンプルなページャープラグイン作りました

ダウンロード

プラグイン化してみました。

jquery.pager.min.js
jquery.pager.js

プラグイン的な使い方

divに適当にidを割り当てます。
出力されるタグは最近流行の Twitter Bootstrap を基本としてますので「class=“pagination”」としておくといい感じになります。
自分でカスタマイズする場合は59～77行目あたりを修正してください。

1
<div id="pager" class="pagination"></div>

jQueryの実行部分では最低限「totalRec（トータルレコード数）」オプションを指定します。

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
2
<script type="text/javascript" src="js/jquery.pager.min.js"></script>
3
<script type="text/javascript">
4
$(function() {
5
  $('#pager').pager({
6
    totalRec: 100
7
  });
8
});
9
</script>

オプション

その他オプション一覧です。

totalRec	総レコード数
currentPage	現在のページ
pageRec	１ページに表示するレコード数
showNav	表示するナビゲーションの数
path	パーマリンク「&page=」とすればリンクにパラメータを設定できます。デフォルトではそのまま「1」「2」などの番号でリンクされます。

new演算子で使用する

ほかのプログラムに組み込んで使用することの方が多いと思いますのでnew演算子で使用することもできます。

1
$(function() {
2
  var pager = new Pager({
3
    totalRec: 100,
4
    element: $('#pager')
5
  });
6
  $('#pager a').live('click', function(e) {
7
    e.preventDefault();
8
    /* ~~~
9
    ページが切り替わったときの処理
10
    ~~~ */
11
    pager.makeNav(parseInt($(this).attr('href')));
12
  });
13
});