プラグイン的な使い方
divに適当にidを割り当てます。
出力されるタグは最近流行の Twitter Bootstrap を基本としてますので「class="pagination"」としておくといい感じになります。
自分でカスタマイズする場合は59~77行目あたりを修正してください。
html
<div id="pager" class="pagination"></div>
jQueryの実行部分では最低限「totalRec(トータルレコード数)」オプションを指定します。
html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.pager.min.js"></script> <script type="text/javascript"> $(function() { $('#pager').pager({ totalRec: 100 }); }); </script>
オプション
その他オプション一覧です。
totalRec | 総レコード数 |
---|---|
currentPage | 現在のページ |
pageRec | 1ページに表示するレコード数 |
showNav | 表示するナビゲーションの数 |
path |
パーマリンク 「&page=」とすればリンクにパラメータを設定できます。 デフォルトではそのまま「1」「2」などの番号でリンクされます。 |
new演算子で使用する
ほかのプログラムに組み込んで使用することの方が多いと思いますのでnew演算子で使用することもできます。
javascript
$(function() { var pager = new Pager({ totalRec: 100, element: $('#pager') }); $('#pager a').live('click', function(e) { e.preventDefault(); /* ~~~ ページが切り替わったときの処理 ~~~ */ pager.makeNav(parseInt($(this).attr('href'))); }); });
makeNavメソッドの引数は次のページの番号を指定します。
プラグインとか作ったことないので、いろいろいろいろ間違ってるかもしれませんが以上です。