javascript 分页兑现 分页样式可自定义

javascript 分页实现 分页样式可自定义

/**
* 创建实例的的方法
* @param {Object} Class
* @param {Object} params
*/
var newObj = function (Class,params){
	function _new (){
		if(Class._new){
			Class._new.call(this,params);//改变this指向
		}
	}
	_new.prototype = Class;
	return new _new();
}

/**
* page对象
*/
var page = {
	/**
	 * 构造函数
	 * @param {Object} pageSize ：一页显示多少条
	 * @param {Object} dataTotalCount ：总共数据条数
	 * @param {Object} mode : 分页模式 (1:不显示页数,只显示上一页下一页;2:待续);
	 * @param {Object} pageItem ：一页显示多少条目页
	 * @param {Object} pageContainer　：容器
	 * @param {Function} selfReqFun : 自定义请求函数
	 */
	_new : function(options){
		var pageItem = options.pageItem;
		var pageContainer = options.pageContainer;
		var selfReqFun = options.selfReqFun;
		/**
		 * 初始化page属性
		 */
		this.pageNo = options.pageNo;
		this.pageSize = options.pageSize;
		this.dataTotalCount = options.dataTotalCount;
		this.mode = options.mode;
		this.pageItem = pageItem == ""||pageItem == null ? this.mode = 1 : pageItem;
		this.pageContainer = pageContainer == "" || pageContainer == null ? (function (){
			var container = document.createElement("div");
				container.id = "pages";
				container.style.textAlign = "center";
				container.align = "center";
			document.getElementsByTagName("body")[0].appendChild(container);
			return container;
		})() : pageContainer;
		this.pageCount = Math.ceil(this.dataTotalCount/this.pageSize);
		this.selfReqFun = selfReqFun == null ? function(){} : selfReqFun;
		this.itemStyle = options.itemStyle;
		this.selfArgs = options.selfArgs;
	},
	/**
	 * 注册事件
	 * @param {Object} target
	 * @param {Object} eventName
	 * @param {Object} handler
	 * @param {Object} args
	 */
	attachEvent : function  (target,eventName,handler,args){
		var eventHandler = handler;
		if(args){
			eventHandler = function(e){
				handler.call(args,e);
			}
		}
	    if(window.attachEvent){
	        target.attachEvent("on" + eventName, eventHandler );   
		} else{
	        target.addEventListener(eventName, eventHandler, true); 
		}   
	},
	/**
	 * 检查pageNo是否合法
	 * @param {Object} pageNo
	 */
	checkPageNo : function(pageNo){
		 if(pageNo == ""  || pageNo == null || pageNo < 1) pageNo = 1;
		 if(pageNo > this.pageCount)pageNo = this.pageCount;
		 return pageNo;
	},
	/**
	 * 创建分页条目
	 * @param {Object} pageNo
	 */
	createPageTab : function(){
		var flag = false;
		//动态添加属性
		this.pageNo = this.checkPageNo(arguments[0]||1);
		var html = '';
		if(this.mode == 1){
				html += '<span title="首页" class="firstPage pageSpan reqSpan" id="first"><<</span>';
				html += '<span title="上一页" class="prevPage pageSpan reqSpan" id="prev">&nbsp;&nbsp;<&nbsp;</span>';
				html += '<span class="pageNo" id = '+this.pageNo+'>'+this.pageNo+'/'+this.pageCount+'</span>';
				html += '<span title="下一页" class="nextPage pageSpan reqSpan" id="next">&nbsp;>&nbsp;&nbsp;</span>';
				html += '<span title="末页" class="lastPage pageSpan reqSpan" id="last">>></span>';
		}
		this.pageContainer.innerHTML = html;
		if(this.itemStyle){
			var itemStyle = this.itemStyle;
			for(var i in itemStyle){
				//判断对象是否为空
				flag = true;
			}
			if (flag) {
				var first = document.getElementById("first");
				var prev  = document.getElementById("prev");
				var next = document.getElementById("next");
				var last = document.getElementById("last");
				first.innerHTML = "<img src="+ itemStyle.firstImg +" style='width:14px;height:14px;cursor:pointer;vertical-align:middle;'/>";
				prev.innerHTML = "<img src="+ itemStyle.prevImg +" style='width:14px;height:14px;cursor:pointer;vertical-align:middle;'/>"
				next.innerHTML = "<img src="+ itemStyle.nextImg +" style='width:14px;height:14px;cursor:pointer;vertical-align:middle;'/>"
				last.innerHTML = "<img src="+ itemStyle.lastImg +" style='width:14px;height:14px;cursor:pointer;vertical-align:middle;'/>"
			}
				
		}
		/**
		 * 注册点击事件
		 */
	   var reqSpans = this.pageContainer.getElementsByTagName("span");
	   for(var j = 0 ; j < reqSpans.length ; j++){
	   		var _this = reqSpans[j];
			_this.style.cursor="pointer";
	   		if((_this.className || _this.getAttribute("class")).indexOf("reqSpan") > 0){
				this.attachEvent(_this,"click",this.requestEvent,this);
			}
	   }
	},
	/**
	 * 请求函数
	 * @param {Object} pageNo
	 * @param {Object} id
	 */
	requestEvent : function(e){
		var target = e.srcElement || e.target;
		if(target.nodeName.toLowerCase() === "img"){
			target = target.parentNode;
		}
		var id = target.id;
		var pageNo = this.pageNo
		pageNo = (id === "first")? 1 :
		(id === "prev" && pageNo >= 1) ? this.checkPageNo(pageNo-1):
		(id === "next" && pageNo <= this.pageCount) ? this.checkPageNo(pageNo+1):
		(id === "last")? this.pageCount : 1;
		this.selfReqFun(pageNo);
	}				
}		

******************调用方法***********************
            /**
             * 创建page对象所需的属性
             */
            var pageOptions = {
                pageNo: 0,
                pageSize: 3,
                dataTotalCount: 0,//总共有多少条数据（主要针对前台分页，如果后台已经分好，则不需此属性）
                mode: 1,//以怎样的方式显示分页样式
                pageItem: null,//可选(如果mode不为1 这用到此属性：表示分页区一次显示多少页码)
                pageContainer: null,//页面显示区域
                selfReqFun: tab2Req,//请求函数(一般只需传入pageNo参数即可)
                selfArgs: {},//自定义请求函数的参数
                /*
                 * 自定义分页区页码显示样式
                 */
                itemStyle: {
                    //页码自定义样式(可选)
                    firstImg: "images/first.png",
                    prevImg: "images/prev.png",
                    nextImg: "images/next.png",
                    lastImg: "images/last.png"
                }
            };


    newObj(page, pageOptions).createPageTab(pageNo);//简单一句话ok！