javascript同步分頁

目前網上分頁的例子比較多，可是對其原理不是很瞭解，平時用的時候只是拿來調用，今天花了點時間，採用面向對象方式寫了一個demo。對其方法作了封裝，對外只提供一個調用接口。

window.loadPage = function(obj,data){
　　var p = new Pagation(obj,data);
   p.showPageHtml();
}

　根據後臺傳送的數據，實現同步分頁功能。具體代碼以下:

/**
 * 同步分頁
 */
(function(window){
	function Pagation(obj,data){
		this.obj = obj;
		this.dataArr = data;
		this.currPage = 1;
		this.pageSize = 10;//一頁顯示多少條數據
		this.totalData = this.dataArr.length;
		this.totalPage = Math.ceil(this.totalData/this.pageSize);
	}
	
	/**
	 * 根據頁碼跳轉
	 * @param {Object} pageNo
	 */
	Pagation.prototype.gotoPage = function(pageNo){
		this.currPage = pageNo;
		this.showPageData();
	}
	
	/**
	 * 顯示分頁基本架構
	 */
	Pagation.prototype.showPageHtml = function(){
		var start = (this.currPage - 1) * this.pageSize;
		var end = this.currPage * this.pageSize;
		var _this = this;
		var html = "<div class='pageHeader'><a class='firstPage' href='javascript:void(0)'>首頁</a>  <a class='prevPage' href='javascript:void(0)'>上一頁</a>  <span class='pageNoList'></span><a class='nextPage' href='javascript:void(0)'>下一頁</a>  <a class='lastPage' href='javascript:void(0)'>尾頁</a></div>";
		
		html+="<div class='pageContent'></div><div class='pageFoot'>共<span class='totalPage'></span>頁,當前第<span class='currPage'></span>頁,共<span class='totalData'></span>條數據</div>";
		
		$(_this.obj).html(html);
		
		//首頁
		$(_this.obj).find(".firstPage").click(function(){
			_this.gotoPage(1);
		});
		
		//尾頁
		$(_this.obj).find(".lastPage").click(function(){
			_this.gotoPage(_this.totalPage);
		});
		
		//上一頁
		$(_this.obj).find(".prevPage").click(function(){
			if(_this.currPage > 1) {
				_this.gotoPage(_this.currPage - 1);
			}
		});
		
		//下一頁
		$(_this.obj).find(".nextPage").click(function(){
			if(_this.currPage < _this.totalPage) {
				_this.gotoPage(_this.currPage + 1);
			}
		});
		
		this.showPageData();
	}
	
	/**
	 * 顯示分頁數據
	 */
	Pagation.prototype.showPageData = function(){
		var start = (this.currPage - 1) * this.pageSize;
		var end = this.currPage * this.pageSize;
		var html = "";
		
		for(var i = start; i < end; i++) {
			var data = this.dataArr;
			
			if(data[i]) {
				html+= '<p>'+data[i]+'</p>';
			}
		}
		
		this.pageNoList();
		$(this.obj).find(".pageContent").html(html);
		$(this.obj).find(".totalPage").html(this.totalPage);
		$(this.obj).find(".currPage").html(this.currPage);
		$(this.obj).find(".totalData").html(this.totalData);
	}
	
	/**
	 * 顯示頁碼
	 */
	Pagation.prototype.pageNoList = function(){
		var _this = this;
		var html = "";
		var endCount = this.currPage + 2;
		
		if(endCount > this.totalPage) {
			endCount = this.totalPage;
		}
		
		var startCount = this.currPage - 2;
		
		if(startCount <= 0) {
			startCount = 1;
		}
		
		for(var i = startCount; i <= endCount;i++) {
			if(this.currPage == i) {
				html+='<span>'+i+'</span>  ';
			} else {
				html+="<a class='pageNo' href='javascript:void(0)'>"+i+"</a>  ";
			}
		}
		
		$(this.obj).find(".pageNoList").html(html);
		
		$(this.obj).find(".pageNoList").find(".pageNo").each(function(){
			$(this).click(function(){
				_this.gotoPage(parseInt($(this).html()));
			});
		});
	}
	
	/**
	 * 將接口共享出去
	 * @param {Object} obj
	 * @param {Object} data
	 */
	window.loadPage = function(obj,data){
		var p = new Pagation(obj,data);
	    p.showPageHtml();
	}

})(window);


$(function(){
	var demoData = [];
	
	for(var i = 1; i<= 200; i++) {
		demoData.push(i);
	}
	
	loadPage($("#pagation"),demoData);
});

　　代碼數據只是個demo，具體數據顯示，能夠根據自身的數據格式顯示，能夠是json格式。