WEBOPIXEL

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

Posted: 2012.03.30 / Category: javascript / Tag: 

以前、PHPでページャーを作成しましたが、それのjQuery版を作成しました。
あまり用途ないかもしれませんが、Ajaxでいろいろしたい場合Javascriptで表示できた方が便利かなとか。

Sponsored Link

ダウンロード

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

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

プラグイン的な使い方

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メソッドの引数は次のページの番号を指定します。

プラグインとか作ったことないので、いろいろいろいろ間違ってるかもしれませんが以上です。