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.pageNopageNo = (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！