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格式。