Jsでのページナビのサンプルソース

提供:wiki - PCスキルの小技・忘却防止メモ
移動: 案内, 検索

Jsでのページナビのサンプルソース。

ソース

Jsでのページナビのサンプルソース。コレにリンクタグを付けたりすればOK。

function makePageNavi(navTotal, navCurr) {
	var navView = 5;   // 表示するページ数
	var navBgin = 1;   // ページナビの最初
	
	var tagPre = "< | ";	// 前ページ:必要に応じてリンクタグにする
	var tagNxt = ">";	// 次ページ:必要に応じてリンクタグにする
	var tagNum = "";	// 各ページ
	
	if (navCurr < 1) {
		// カレントページが0以下
		navCurr = 1;
	}
	
	if(navTotal <= navView){
		// 表示するページ数がページ総数より少ないときは、前・次ページのタグ不要
		tagPre = "";
		tagNxt = "";
	}
	else {
		if(navTotal <= navCurr) {
			// カレントページがページ総数より多いときは、次ページのタグ不要
			tagNxt = "";
			
			// ページ総数が最後になるようにページナビの最初を設定
			navBgin = navTotal - (navView - 1);
			
			// 最後のページをカレントページに設定
			navCurr = navTotal;
		}
		else if (navCurr <= 3) {
			// カレントページが3以下なら、前ページのタグ不要
			tagPre = "";
		}
		else if (navTotal-2 <= navCurr) {
			// カレントページが最後の方だったら次ページのタグ不要
			tagNxt = "";
			
			// ページ総数が最後になるようにページナビの最初を設定
			navBgin = navTotal - (navView - 1);
		}
		else {
			navBgin = navCurr - 2;
		}
	}
	
	// ページ一覧を作成
	for (var i=0, j=navBgin; i<navView; i++, j++ ){
		var _tmp = String(j);
		if(navCurr == j) {
			// カレントページのみ太字
			_tmp = "<b>" + _tmp + "</b>"; 
		}
		// 必要に応じてリンクタグにするなり装飾するなりする
		tagNum += _tmp + " | ";
	}
	
	var _tag = tagPre + tagNum + tagNxt;
	return _tag;
}

var navTotal = 10; // ページ総数(件数)
var navCurr = 3;   // カレントページ
var htmlTag = makePageNavi(navTotal, navCurr);

document.write(htmlTag);

オブジェクト化

jsでページナビのオブジェクト - サンプル

var PageNaviClass = function (_total) {
	/// <summary>
	/// ページナビのオブジェクト
	/// 
	/// _total: ページ総数
	/// 
	/// ex. 総ページ数が9ページのとき
	///  - カレントページが「1」のとき:「  [1] 2  3  4  5  >」
	///  - カレントページが「2」のとき:「   1 [2] 3  4  5  >」
	///  - カレントページが「3」のとき:「   1  2 [3] 4  5  >」
	///  - カレントページが「4」のとき:「<  2  3 [4] 5  6  >」
	///  - カレントページが「5」のとき:「<  3  4 [5] 6  7  >」
	///  - カレントページが「6」のとき:「<  4  5 [6] 7  8  >」
	///  - カレントページが「7」のとき:「<  5  6 [7] 8  9   」
	///  - カレントページが「8」のとき:「<  5  6  7 [8] 9   」
	///  - カレントページが「9」のとき:「<  5  6  7  8 [9]  」
	/// ※ 前・次があるときは、カレントページの前後、無ければ「0」
	/// </summary>
	
	var self = this;
	
	var navView = 5;  // 表示したいページナビゲーション数
	var navTotal = 0; // 総ページ数
	
	self.setNaviView = function (_view) {
		/// <summary>
		/// 表示したいページ数の変更
		///
		/// _view: 表示したいページ数
		/// </summary>
		
		navView = _view || navView;
	}
	
	self.getNaviObj = function (_cur) {
		/// <summary>
		/// ページナビで使う各種データオブジェクトの取得
		///
		/// _cur: 表示したいページ番号
		/// </summary>
		
		_cur = parseFloat(_cur) || 1;
		
		if(_cur <= 0){
			_cur = 1;
		}
		
		if (navTotal < _cur) {                     // 総ページ数を上回るページを表示しようとした場合
			_cur = navTotal;
		}
		
		var _result = ({});
		_result.All = navTotal;                    // 総ページ数
		_result.Pre = _cur - 1;                    // 前ページ
		_result.Nxt = _cur + 1;                    // 次ページ
		_result.Cur = _cur;                        // 現在のページ
		_result.Vie = new Array();                 // 表示するページ
		
		var _bgn = 1;                              // 表示するページナビの最初
		var _end = _bgn + navView;                 // 表示するページナビの最後
		
		var _center = Math.floor(navView / 2);
		
		if (navTotal <= navView) {                 // 表示するページ数がページ総数より少ないとき
			_result.Pre = 0;                       // 前ページは不要
			_result.Nxt = 0;                       // 次ページは不要
			
			_end = navTotal + 1;                   // 総ページ数がページの最後
		}
		else {
			if (navTotal <= _cur) {                // カレントページがページ総数より多いとき
				_result.Nxt = 0;                   // 次ページは不要
				_bgn = navTotal - (navView - 1);   // ページ総数が最後になるようにページナビの最初を設定
				_cur = navTotal;                   // 最後のページをカレントページに設定
			}
			else if (_cur <= _center) {            // カレントページが最初の方
				_result.Pre = 0;                   // 前ページは不要
			}
			else if (navTotal - _center <= _cur) { // カレントページが最後の方
				_result.Nxt = 0;                   // 次ページは不要
				_bgn = navTotal - (navView - 1);   // ページ総数が最後になるようにページナビの最初を設定
			}
			else {
				_bgn = _cur - _center;
			}
			
			_end = _bgn + navView;                 // 最後のページを再設定
		}
		
		for (var i = _bgn; i < _end; i++) {
			_result.Vie.push(i);
		}
		
		return _result;
	}
	
	self.initialize = function (_total) {
		/// <summary>
		/// コンストラクタ
		///
		/// _total: 総ページ数
		/// </summary>
		
		navTotal = parseFloat(_total) || navTotal;
	}
	
	self.initialize(_total);
}

var pnObj = new PageNaviClass(90);    // 総ページ数でインスタンス化
var pageNavi = pnObj.getNaviObj(10);  // カレントページを引数に諸々オブジェクトで受け取る

※「pageNavi.Pre」「pageNavi.Nxt」が「0」だったら前・次へのリンクはつけない感じ。

関連項目