欢迎使用CSDN-markdown编辑器

来源:互联网 发布:java进程调度算法代码 编辑:程序博客网 时间:2024/05/17 22:04

由于接口形式为尾部/{pageNum}/{pageSize},根据这样的格式写一个页数小于10 显示所有页数,大于10显示为省略号的格式
这里写图片描述
这里写图片描述

插件如下:
window.my_pager = {
init: function(config){
this.config = config;
this.initPagerBox(config);
this.renderFirstPage();
this.bindPageEvent();
},
//初始化分页器
initPagerBox: function(config){
var htmlstr =’上一页

‘;
this.pages = Math.ceil(config.total / config.pageSize) ;
// alert(pages);
if(this.pages <= 10){
for(var i = 0; i < this.pages; i ++){
htmlstr += ‘‘;
htmlstr += (i+1);
htmlstr += ‘‘;
}
}else if(this.pages >10 ) {
for(var i = 0; i < 10; i ++){
htmlstr += ‘‘;
htmlstr += (i + 1);
htmlstr += ‘‘;
}
htmlstr += ‘‘;
htmlstr += “…”;
htmlstr += ‘
‘;
}
htmlstr += ‘
下一页到第’;
htmlstr += ‘确定‘;
alert(this.config.pageHtmlBox);
console.log(htmlstr);
var pageHtmlBoxClass = “.” + this.config.pageHtmlBox;
$(pageHtmlBoxClass).append(htmlstr);

},//绑定分页事件bindPageEvent: function(){   var pageHtmlBoxClass = "."+this.config.pageHtmlBox;   var previousClass = pageHtmlBoxClass + " .previous_page";   var nextClass = pageHtmlBoxClass + " .next_page";   var aItemClass = pageHtmlBoxClass+" .page_count";   var assureClass = pageHtmlBoxClass + " .assure_page_num";   var inputclass = pageHtmlBoxClass + " .page_num";   this.pages = Math.ceil(this.config.total / this.config.pageSize);   var that = this;   $(previousClass).live("click",function(){        if(that.config.currentPage == 1){            return;        }else {            that.config.currentPage -= 1;            var url = address + that.config.url + "/"+ that.config.currentPage+"/"+that.config.pageSize;            that.getData(url);        }   });    $(nextClass).live("click",function(){        if(that.config.currentPage + 1 >  that.config.total){            return;        }else {            that.config.currentPage += 1;            var url = address + that.config.url + "/"+ that.config.currentPage+"/"+that.config.pageSize;            that.getData(url);        }   });   $(aItemClass).live("click",function(){      var page_number = $(this).text();      var url = address + that.config.url + "/"+ page_number +"/" + that.config.pageSize;      that.getData(url);   })    $(assureClass).live("click",function(){      var page_number = $(inputclass).val();      if(!isNaN(page_number) &&  page_number > 0 && page_number <= that.pages){        var url = address + that.config.url + "/"+ page_number +"/" + that.config.pageSize;        that.getData(url);      }else{        alert("wrong input!");      }   })},//渲染默认的第一页renderFirstPage: function(){    var url = address + this.config.url + "/"+ this.config.currentPage+"/" + this.config.pageSize;    this.getData(url,this.config.callback);},//请求AjaxgetData:  function(url){    var that = this;    $.ajax({          type: "get",          dataType: "json",         contentType : "application/json",        url: url,        async: true,         success:function(msg){            var orderlist = msg.result;            console.log("pageinfo==="+ JSON.stringify(msg));            that.config.callback(msg);          }     })}

}
css 样式
.zpager a {
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
background-color: white;
border: solid 1px #868686;
margin: 0 5px;
}

.zpager input{
width: 20px;
height: 20px;
margin: 0 5px;
}

.zpager .previous_page {
width: 50px;
}

.zpager .next_page {
width: 50px;
}

.zpager .assure_page_num {
width: 30px;
}
.page_count_wrap {
display: inline-block;
}

使用方法,
1、在页面需要添加分页器的地方添加

其中zpager 是为了统一样式,allorder_pager则为了后续补充html string,allorder_pager需要唯一;
2、根据需要形成config参数
var page_config = {
url: “”, //不加页数和每页显示数量的接口地址
currentPage: 1, //当前页数
startPage: 1, //起始页数
pageHtmlBox: “”, //分页器的容器
total: 100, //数据总量
pageSize: 5 //每页显示数量
callback: //得到数据后执行的回调
}
3、调用my_pager.init(page_config )