欢迎使用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 )
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- css3动画在线工具
- LeetCode (Sum Root to Leaf Numbers)
- ffmpeg命令行工具的使用
- 手动安装MySQL数据库
- 测试环境清理表数据,要建一个备份数据库
- 欢迎使用CSDN-markdown编辑器
- 正则表达式(?P<name>...)
- Mongodb3.4.2 Replica Set主节点及备份节点裁判节点
- 【OPNET学习系列文章之4】属性和统计量
- Android or Linux 的休眠与唤醒
- 阿里云Bucket权限控制
- 一个ant的简单实例
- 【Redis】 总结
- MYSQL 5.7 安装教程