jiichan.com

PROGRAMMING

javascript
CSS
PHP
Java

ページャーを作る 1/4

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

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

-----2015.06.21（修正）-----
イベント登録のページ番号クリックで、先頭ページと最終ページをクリックした場合、中央のページ番号をそれぞれクリックした側に寄せられるように 修正しました。例えば、先頭ページ（１ページ）の場合はクリックしたら中央ページ番号が２ページから始まるように。（イベント登録　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);
};

引数を３個とる関数です。それぞれの引数の意味は、次のとおりです。
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;
},

次のページ