JS 之 分页
JS 之 分页
主要思路
根据总条数 和 每页数量计算 总页数;无省略页码, 如果总页数 <= 分页按钮数量, 则按实际页数输出按钮;省略页面码在前, 如果当前页 为 最后页, 则起始页 = 总页数 - 分页按钮数量 1,起始页的下一页为省略页码;省略页面码在后, 如果当前页 为 分页按钮数量 - 2,不是最后两个按钮上, 则 倒数第二个按钮为省略页码,最后
JS 之 分页
主要思路
- 根据总条数 和 每页数量计算 总页数;
- 无省略页码, 如果总页数 <= 分页按钮数量, 则按实际页数输出按钮;
- 省略页面码在前, 如果当前页 为 最后页, 则起始页 = 总页数 - 分页按钮数量 1,起始页的下一页为省略页码;
- 省略页面码在后, 如果当前页 为 分页按钮数量 - 2,不是最后两个按钮上, 则 倒数第二个按钮为省略页码,最后一个按钮为最后一页;
- 否则省略页码存在于两端, 第二个和倒数第二个按钮为省略按钮, 第一个和倒数第一个, 分别为第一页和最后一页, 当前页 位于剩余按钮的中间, 所以左右按钮分别为当前页递减递增;
调用
new Page(el,{count:8}).setPage({current:1,pageSize:10,total:100})
全文
var Page = function(el, opti) {var defaults = {current: 1, // 当前页total: 0, // 总页数count: 8, // 分页按钮数量 // 至少为7个按钮pageSize: 10 // 每页的数量,如每页10条};this.html = [];this.item = <li data-index=@page><a>@page</a></li> ; // 正常页码this.itemActive = <li class=active data-index=@page><span>@page</span></li> ; // 当前页,激活页this.itemDis = <li class=disabled more><span>...</span></li> ; // 省略页码this.itemPrev = <li data-index=prev class=@dis><a>«</a></li> ; // 上一页this.itemext = <li data-index=next class=@dis><a>»</a></li> ; // 下一页 = $.extend(defaults, opti); = el; // 插入页码的容器();
}
Page.prototype.replace = function(str, page) {return str.replace(/@page/g, page);
}
Page. = function() {for (var i = 1; i <= .total; i) {if (.current == i) {this.html.push(this.replace(this.itemActive, i));continue;}this.html.push(this.replace(this.item, i));}
}
Page.prototype.before = function() {var start = .total - .count 1;for (var i = start; i <= .total; i) {if (.current == i) {this.html.push(this.replace(this.itemActive, i));continue;}if (i == start) {this.html.push(this.replace(this.item, 1));continue;}if (i == start 1) {this.html.push(this.replace(this.itemDis, i));continue;}this.html.push(this.replace(this.item, i));}
}
Page.prototype.after = function() {for (var i = 1; i <= .count; i) {if (.current == i) {this.html.push(this.replace(this.itemActive, i));continue;}if (i == .count - 1) {this.html.push(this.replace(this.itemDis, i));continue;}if (i == .count) {this.html.push(this.replace(this.item, .total));continue;}this.html.push(this.replace(this.item, i));}}
Page.prototype.justify = function() {this.html.push(this.replace(this.item, 1));this.html.push(this.itemDis);var start, end, diss;if ((.count - 4) % 2) {diss = (.count - 4 - 1) / 2;start = .current - diss;end = .current diss;} else {diss = (.count - 4) / 2;start = .current - diss;if (start == 2) {start = .current - diss 1;end = .current diss;} else {end = .current diss - 1;}}for (var i = start; i <= end; i) {if (.current == i) {this.html.push(this.replace(this.itemActive, i));continue;}this.html.push(this.replace(this.item, i));}this.html.push(this.itemDis);this.html.push(this.replace(this.item, .total));
}
Page.prototype.judge = function() {if (.total <= .count) {();return;}if (.current > .total - (.count - )) {this.before();return;}if (.current < .count - 2) {this.after();return;}this.justify();
}
Page. = function() {this.setPage({ current: .current });var _this = this;$().on( click , li , function() {var _page = $(this).data( index );if (_page == prev ) _page = _.current - 1;if (_page == next ) _page = _.current 1;if (!_page) return;if (_page == _.current) return;_this.setPage({ current: _page });$(_).trigger(change, [_page]);});
}Page.prototype.setPage = function(setpage) {if (!setpage || !) {( current page undefined );return;}.current = ;if (setpage.pageSize) .pageSize = setpage.pageSize;if () .total = ( / .pageSize);this.html = [];this.judge();var prev = == 1 ? this.itemPrev.replace(/@dis/g, disabled ) : this.itemPrev.replace(/@dis/g, );var next = == .total ? this.itemext.replace(/@dis/g, disabled ) : this.itemext.replace(/@dis/g, );var html = <ul class=pagination> prev this.html.join( ) next </ul> ;if (!.total) {$().addClass( hide );return} else {$().removeClass( hide );}if ($().find( .pagination ).length) {$().find( .pagination ).html(html);} else {$().html(html);}}
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可,转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间: 2024-01-18 06:21:19
上一篇:Qnet弱网测试工具操作指南
下一篇:网络通信
推荐阅读
留言与评论(共有 12 条评论) |
本站网友 张洪军 | 18分钟前 发表 |
i));continue;}this.html.push(this.replace(this.item | |
本站网友 奢酷 | 4分钟前 发表 |
10 | |
本站网友 oppo应用商店 | 9分钟前 发表 |
pageSize | |
本站网友 北京托运 | 24分钟前 发表 |
i));continue;}if (i == .count) {this.html.push(this.replace(this.item | |
本站网友 手机店装修效果图 | 29分钟前 发表 |
如果当前页 为 分页按钮数量 - 2 | |
本站网友 315晚会主持人 | 20分钟前 发表 |
// 总页数count | |
本站网友 贷款业务 | 10分钟前 发表 |
第一个和倒数第一个 | |
本站网友 可摘义齿 | 16分钟前 发表 |
this.itemPrev.replace(/@dis/g | |
本站网友 tri | 2分钟前 发表 |
i));continue;}this.html.push(this.replace(this.item | |
本站网友 杨家群租房 | 10分钟前 发表 |
.total));continue;}this.html.push(this.replace(this.item | |
本站网友 globalmapper | 6分钟前 发表 |
this.itemPrev.replace(/@dis/g |