jiichan.com

PROGRAMMING

javascript
CSS
PHP
Java

ページャーを作る

サイトを構築していると必ずといっていいほどページャーが必要になってきます。
ブログなど日常的にコンテンツが増えるていくページは、ページ分けしなければ下にどんどん長くなり、非常に見ずらいものになります。
そこで、汎用性のあるページャーを作ってみました。
長いのでページを4分割でご紹介します。

-----2015.02.06(修正)-----
ページ数が多くなると希望のページへの移動が難しくなるので、中央部のページを10件単位でプラスマイナスできるように修正しました。
後、不要なコードなどもありましたので整理しました。

-----2015.06.21(修正)-----
イベント登録のページ番号クリックで、先頭ページと最終ページをクリックした場合、中央のページ番号をそれぞれクリックした側に寄せられるように 修正しました。例えば、先頭ページ(1ページ)の場合はクリックしたら中央ページ番号が2ページから始まるように。(イベント登録 186行~199行追加)

  ページャーを作る 1/4   1. ページャー用関数を準備 2. プロパティやメソッドの追加(各要素を生成)
  ページャーを作る 2/4   3. プロパティやメソッドの追加(スタイルの設定)
  ページャーを作る 3/4   4. プロパティやメソッドの追加(イベント登録)
  ページャーを作る 4/4   5. プロパティやメソッドの追加(イベントのクロスブラウザ対策) 6. プロパティやメソッドの追加(ページャー表示用メソッド) 7. ページャーの使い方



MkenPagerのダウンロード(mkenPager.js)
mkenPager.zip

1.ページャー用関数を準備

最初にページャー用の関数を準備します。この関数にイベントやスタイルなどを追加していきます。

var MkenPager = function(tagId, totalRow, viewCount){
	// ページャーの表示されるタグ
	this.tagId = tagId;
	// データの総件数
	this.totalRow = Number(totalRow);
	// 1ページに表示する件数
	this.viewCount = Number(viewCount);
	//	現在選択されているページの先頭データの行番号
	this.currentRow = 1;
	// 最終ページ番号
	this.lastPageNum = Math.ceil(this.totalRow / this.viewCount);
};

引数を3個とる関数です。それぞれの引数の意味は、次のとおりです。
1. tagId:ページャーが表示されるHTMLタグのidです(例:<div id="paging"></div>) 2. totalRow:表示するデータの総件数です。 3. viewCount:1ページに表示したい件数です。

2.プロパティやメソッドの追加(各要素を生成)

前記の関数MkenPagerにプロパティやメソッドを追加していきます。プロトタイプ定義をオブジェクト形式で追加しています。
まずは各要素の生成です。

MkenPager.prototype = {
createHTML: function(){
	// ページャーを囲む枠
	var htmlStr = '<div id="' + this.tagId + 'Pager">';
	// 前へボタン(子の空のdivは三角)
	htmlStr += '<div id="' + this.tagId + 'Prev"><div></div></div>';
	// マイナスボタン(中央部のページを10件マイナスする)
	htmlStr += '<div id="' + this.tagId + 'Minus">-</div>';
	// ページ表示部
	htmlStr += '<ul id="' + this.tagId + 'PageNumGroup">';
	// ページ番号を作成
	var tmpTotalRow = this.totalRow;
	// リストの数は10個で固定
	for(var pageNum = 1; pageNum <= 10; pageNum++){
		if(tmpTotalRow > 0){
			if(pageNum == 10){
				htmlStr += '<li>' + this.lastPageNum + '</li>';
			}else{
				htmlStr += '<li>' + pageNum + '</li>';
			}
		}else{
			htmlStr += '<li class="' + this.tagId + 'nonePage">&nbsp;</li>';
		}
		tmpTotalRow = tmpTotalRow - this.viewCount; 
	}
	htmlStr += '</ul>';
	// プラスボタン(中央部のページを10件プラスする)
	htmlStr += '<div id="' + this.tagId + 'Plus">+</div>';
	// 次へボタン(子の空のdivは三角)
	htmlStr += '<div id="' + this.tagId + 'Next"><div></div></div>';
	htmlStr += '</div>';
	// フロートクリア
	htmlStr += '<div id="' + this.tagId + 'clear"></div>';
	
	var pagerContainer = document.getElementById(this.tagId);
	pagerContainer.innerHTML = htmlStr;
},

次のページ