CoolWebWindow

自作したjQueryプラグインを無料配布しているサイトです。
jQueryプラグインは商用利用可能、MITライセンス表示、カスタマイズ無制限です。

無料jQueryプラグイン [ページネーション]

単体バージョン:jquery.pagination.js

静的HTMLファイルをページ分割するスクリプトです。特にECサイトにおける商品一覧を分割したり、お知らせ一覧を分割するのに適しています。

繰り返し表示する部分のHTMLソースコードは自由に記述できるのが特徴です。デモではli要素とdiv要素を使用していますが、他の要素でも問題なく利用できます。

また、ページャーのデザインもCSSでかなり柔軟に変更できます。

  • ページャー全体をdiv要素で囲んで、適当にidやクラス名をつけてください。そのidやクラス名をスクリプトを呼び出すときに使用します。
  • 繰り返す要素にdiv要素を利用するときは、繰り返すdiv要素をさらにdiv要素で囲んで(入れ子にして)idやクラス名をつけてください。詳しくはデモページやダウンロードファイルをご参考ください。
  • ページが1ページしかない場合はページャーを表示しません。
  • ページャーを表示したい箇所に、「<div class="pager"></div>」と記述してください。
  • 「.nownum」で現在のページ数、「.totalnum」でトータルのページ数を取得できます。値のみを取得できるので、他のデザインはHTMLやCSSで自由に記述できます。

オプションは以下のとおりです。

element繰り返す要素を設定します。「div」「p」「li」など何でも利用できます。
初期値は「'div'」です。
prevTextページャーの「前」テキストの内容を指定します。
初期値は「'prev'」です。
nextTextページャーの「後」テキストの内容を指定します。
初期値は「'next'」です。
firstTextページャーの「最初」テキストの内容を指定します。
初期値は「'first'」です。
lastTextページャーの「最後」テキストの内容を指定します。
初期値は「'last'」です。
ellipsisTextページャーの「省略」テキストの内容を指定します。
初期値は「'…'」です。
viewNum1ページに表示する数を指定します。
初期値は「6」です。
pagerNumページャーのカウンター(数字)の表示数を指定します。
初期値は「3」です。
ellipsis省略記号を表示するかどうかを選べます。「true」で表示、「false」で表示しません。
初期値は「true」です。
linkInvalid現在ページ、あるいは、最初のページでの前・最初ボタン、最後のページでの後・最後ボタンのクリックを無効にするかどうかを選べます。「true」で無効、「false」で有効です。
初期値は「false」です。
goTopページャーをクリックした際にページの最初から表示するかを選べます。「true」でページの最初から表示、「false」で現在の位置からの表示になります。
初期値は「true」です。
firstLastNav最初・最後ボタンを表示するかを選べます。「true」で表示、「false」で非表示です。
初期値は「true」です。
prevNextNav前・後ボタンを表示するかを選べます。「true」で表示、「false」で非表示です。
初期値は「true」です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページネーション</title>
<link rel="stylesheet" href="css/style.css" media="all">
<script src="js/jquery.js"></script>
<script src="js/jquery.pagination.js"></script>
<script>
$(function($) {
	$('.list').pagination({
		element      :'li',
		prevText     : '<',
		nextText     : '>',
		firstText    : '≪',
		lastText     : '≫',
		ellipsisText : '…',
		viewNum      : 8,
		pagerNum     : 3,
		ellipsis     : true,
		linkInvalid  : true,
		goTop        : true,
		firstLastNav : true,
		prevNextNav  : true
	});

	$('.list2').pagination({
		element      :'.inner div',
		prevText     : '前',
		nextText     : '後',
		firstText    : '最初',
		lastText     : '最後',
		ellipsisText : '・・・',
		viewNum      : 4,
		pagerNum     : 3,
		ellipsis     : true,
		linkInvalid  : true,
		goTop        : true,
		firstLastNav : true,
		prevNextNav  : true
	});

});
</script>
</head>
<body>
<div class="list">
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
・・・(略)・・・
	<li>97</li>
	<li>98</li>
	<li>99</li>
	<li>100</li>
	</ul>
	<div class="pager"></div>
	<div class="pageNum"><span class="nownum"></span>/<span class="totalnum"></span>pages</div>
</div><!-- /list -->

<div class="list2">
	<div class="inner">
		<div>1</div>
		<div>2</div>
		<div>3</div>
・・・(略)・・・
		<div>97</div>
		<div>98</div>
		<div>99</div>
		<div>100</div>
	</div><!-- /inner -->
	<div class="pager"></div>
	<div class="pageNum"><span class="nownum"></span>/<span class="totalnum"></span>pages</div>
</div><!-- /list2 -->
</body>
</html>

更新履歴

2016-06-20
ver2.0公開 ひとつのページに複数のページネーションを設置できるように変更しました。
2016-06-07
ver1.3公開 不具合を修正しました。
2016-02-22
ver1.2公開 不具合を修正しました。
2015-12-28
ver1.1公開 一部ソースコードを修正しました。
2015-08-09
ver1.0公開
ページのトップへ戻る