直接上代码，
/** * oop函数表达式 * 分页插件 使用 new Tdhypage(params); 依赖page.css //待开发将css用js赋值... * 总页码数 当前页码数 偏移量 执行查询的函数名（no，size） 插入dom节点（id选择器） * 第一种参数 （建议使用）{count:number , index:number , num:number ,callback : String ,dom: } callback:方法名的字符串形势。 * 第二种参数 （index,count,num,dom,callback） //必须按照顺序传参 * author：DragonetYu@163.com * date：2017-04-09 */ ;(function(doc,window){ /** * 常量类 */ var pageHtml = { html:{ parentDiv:'<div class="box"><div class="page-list">{{ul}}{{div}}<div><div>', ul:'<ul class="pagination">{{li}}</ul>', pervLi:"<li onclick='javascript:{{perv}}' class=page target=_self><span>上一页</span></li>", nextLi:"<li onclick='javascript:{{next}}' class=page1><span>下一页</span></li>", childLi:"<li onclick='javascript:{{child}}' class='{{active}}' target=_self><span>{{num}}</span></li>", childDiv:'<div class="page-total">第{{num}}页,每页<select onchange="{{fun}}(1,this.value);" class="select_options" >{{options}}</select>条</div>', options:'<option class="option_change" value="{{pageNums}}" {{selected}}>{{pageNums1}}</option>', }, /** * 存储css样式 */ pageCss:{ box : '.box{width:auto; height:30px;clear:both; float:right;margin-right:2.5%}', page_list : '.page-list{width:auto,height:30px,float:left}', pagination : '.pagination{width:auto,height:30px,float:left}', pagination_li : '.pagination li{float:left}', pagination_li_span:'.pagination li span{margin:4px 5px 5px 5px;}', page_total : '.page-total{ height:30px;float:left;line-height:30px; margin-left:20px;float:left}', page : '.page{ width:60px; height:30px; line-height:30px; text-align:center;border:1px #999999 solid;box-sizing:border-box;font-size:12px;border-radius:5px 0px 0px 5px; border-right:none;cursor: pointer;}', pgae1 : '.page1{ width:60px; height:30px; line-height:30px; text-align:center;border:1px #999999 solid;box-sizing:border-box;font-size:12px;border-radius:0px 5px 5px 0px;cursor: pointer;}', active : '.active{ width:30px; height:30px; line-height:30px; text-align:center;border-top:1px #999999 solid;border-bottom:1px #999999 solid;border-left:1px #999999 solid;box-sizing:border-box;font-size:12px; background:#fff;}', pageli : '.pageli{ width:30px; height:30px; line-height:30px; text-align:center;border-top:1px #999999 solid;border-bottom:1px #999999 solid;border-left:1px #999999 solid;box-sizing:border-box;font-size:12px; cursor: pointer;}', select_options:'.select_options{width:60px; height:28px;margin:0px 5px 2px 5px;font-size:15px}', }, pageNums:[5, 10, 20, 50, 100], }; var Tdhypage = function () { var args = arguments; if(typeof args[0]==="object"&&args[0]){ //增加的操作dom节点，默认为 id为page的节点； this._dom = args[0]['dom'] || 'div_page'; //总页面数 this._nPageCount = args[0]['count']; //当前页面 this._nCurrIndex = args[0]['index']; if (!this._nPageCount || !this._nPageCount || this._nCurrIndex > this._nPageCount) { return; } //偏移量 ,默认为10 // 如不写 将失去选择偏移量的功能； this._pageNum = args[0]['num'] || 10; //检查是否传值偏移量， 传值 开启选择偏移量函数，不传值 关闭选择函数 this.flag = (!args[0]['num'])?false:true; //执行的分页查询函数名 字符串 默认为"list"; this._callback = args[0]['callback'] || 'list'; }else{ if(args){ //弊端：1.参数必须按顺序执行 this._dom = args[3] || 'div_page'; this._nPageCount = args[1]; this._nCurrIndex = args[0]; if (!this._nPageCount || !this._nPageCount || this._nCurrIndex > this._nPageCount) { return; } this._pageNum = args[2]|| 10; this.flag = (!args[2])?false:true; this._callback = args[4] || 'list'; }else{ return ; } } // console.info(this); this.init(); }; Tdhypage.prototype = { /** * 新建字符串 */ createHtml : function() { var backfun = this._callback; var pageindexNum = 6; var pageNum = this._pageNum; var temps = pageHtml.html; var parentDiv = temps.parentDiv; var ul = temps.ul; var pervLi = temps.pervLi; var nextLi = temps.nextLi; var childLi = temps.childLi; var childDiv = temps.childDiv; var option = temps.options; var options = ''; var pageNums =pageHtml.pageNums ; for ( var key=0;key<pageNums.length;key++) { if(this.flag){ options+=(parseInt(pageNum)==pageNums[key])?option.replace("{{pageNums}}",pageNums[key]).replace('{{selected}}','selected="selected"').replace("{{pageNums1}}",pageNums[key]):option.replace("{{pageNums}}",pageNums[key]).replace('{{selected}}',"").replace("{{pageNums1}}",pageNums[key]); }else{ options+=(parseInt(pageNum)==pageNums[key])?option.replace("{{pageNums}}",pageNums[key]).replace('{{selected}}','selected="selected"').replace("{{pageNums1}}",pageNums[key]):""; } } childDiv = childDiv.replace("{{num}}",this._nCurrIndex).replace("{{fun}}",backfun).replace("{{options}}",options); parentDiv = parentDiv.replace('{{div}}',childDiv); var lis =''; lis += (this._nCurrIndex == 1) ? pervLi.replace("{{perv}}",'void(0);'):pervLi.replace("{{perv}}",backfun+'('+(this._nCurrIndex - 1)+','+pageNum+');') ; var active =""; if (this._nPageCount < pageindexNum) { for (var i = 1; i < this._nPageCount + 1; i++) { active = (i == this._nCurrIndex) ? "active" : "pageli"; lis +=childLi.replace("{{child}}", backfun + "(" + i+ "," + pageNum + ");").replace("{{active}}",active).replace("{{num}}",i); } } else { if (this._nPageCount < 2) { lis +=childLi.replace("{{child}}","void(0);").replace("{{active}}","active").replace("{{num}}",1); }else{ active = this._nCurrIndex == 1?'active':'pageli'; lis+=childLi.replace("{{child}}",backfun + "(" + 1+ "," + pageNum + ");").replace("{{active}}",active).replace("{{num}}",1); if (this._nCurrIndex < pageindexNum) { for(var i=2;i<pageindexNum;i++){ active = (i == this._nCurrIndex) ? "active" : "pageli"; lis +=childLi.replace("{{child}}", backfun + "(" + i+ "," + pageNum + ");").replace("{{active}}",active).replace("{{num}}",i); } lis+=childLi.replace("{{child}}","void(0);").replace("{{active}}","pageli").replace("{{num}}","..."); }else if(this._nPageCount-this._nCurrIndex < pageindexNum){ lis+=childLi.replace("{{child}}","void(0);").replace("{{active}}","pageli").replace("{{num}}","..."); // console.info(this._nPageCount - pageindexNum); for (var i = this._nPageCount - pageindexNum-1; i < this._nPageCount; i++) { active = (i == this._nCurrIndex) ? "active" : "pageli"; lis +=childLi.replace("{{child}}", backfun + "(" + i+ "," + pageNum + ");").replace("{{active}}",active).replace("{{num}}",i); } }else{ lis+=childLi.replace("{{child}}","void(0);").replace("{{active}}","pageli").replace("{{num}}","..."); for (var i = this._nCurrIndex; i < parseInt( this._nCurrIndex + parseInt(pageindexNum / 2)); i++) { active = (i == this._nCurrIndex) ? "active" : "pageli"; lis +=childLi.replace("{{child}}", backfun + "(" + i+ "," + pageNum + ");").replace("{{active}}",active).replace("{{num}}",i); } lis+=childLi.replace("{{child}}","void(0);").replace("{{active}}","pageli").replace("{{num}}","..."); } if (this._nCurrIndex == this._nPageCount) { lis +=childLi.replace("{{child}}", "void(0);").replace("{{active}}","active").replace("{{num}}", this._nPageCount); } else{ lis +=childLi.replace("{{child}}", backfun + "(" + this._nPageCount+ "," + pageNum + ");").replace("{{active}}","pageli").replace("{{num}}", this._nPageCount); } } } lis += (this._nCurrIndex == this._nPageCount) ? nextLi.replace("{{next}}",'void(0);') : nextLi.replace("{{next}}",backfun+'('+(this._nCurrIndex + 1)+','+pageNum+');') ; ul = ul.replace("{{li}}", lis); return parentDiv.replace("{{ul}}",ul); }, init : function() { var pageHtml = this.createHtml(); try{ doc.getElementById(this._dom).innerHTML = pageHtml; }catch(e){ throw new Error("你选择的节点id是：'"+this._dom+"',请仔细核实"); } }, } window['Tdhypage'] = Tdhypage; })(document,window);