您现在的位置是:首页 > 数码 > 

JS 之 分页

2025-07-24 12:50:34
JS 之 分页 主要思路 根据总条数 和 每页数量计算 总页数;无省略页码, 如果总页数 <= 分页按钮数量, 则按实际页数输出按钮;省略页面码在前, 如果当前页 为 最后页, 则起始页 = 总页数 - 分页按钮数量  1,起始页的下一页为省略页码;省略页面码在后, 如果当前页 为 分页按钮数量 - 2,不是最后两个按钮上, 则 倒数第二个按钮为省略页码,最后

JS 之 分页

主要思路

  1. 根据总条数 和 每页数量计算 总页数;
  2. 无省略页码, 如果总页数 <= 分页按钮数量, 则按实际页数输出按钮;
  3. 省略页面码在前, 如果当前页 为 最后页, 则起始页 = 总页数 - 分页按钮数量  1,起始页的下一页为省略页码;
  4. 省略页面码在后, 如果当前页 为 分页按钮数量 - 2,不是最后两个按钮上, 则 倒数第二个按钮为省略页码,最后一个按钮为最后一页;
  5. 否则省略页码存在于两端, 第二个和倒数第二个按钮为省略按钮, 第一个和倒数第一个, 分别为第一页和最后一页, 当前页 位于剩余按钮的中间, 所以左右按钮分别为当前页递减递增;

调用

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组装电脑配置单推荐报价格

本文地址:http://www.dnpztj.cn/shuma/805819.html

相关标签:无
上传时间: 2024-01-18 06:21:19
留言与评论(共有 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