前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >分页-页码实现

分页-页码实现

作者头像
星哥玩云
发布2022-09-14 21:25:54
发布2022-09-14 21:25:54
64300
代码可运行
举报
文章被收录于专栏:开源部署开源部署
运行总次数:0
代码可运行

1、分页页码展示

1 2 3 4 5 6 7 8 9 10

2、最多显示多少个页码

定为10;

3、当前页(锚点)

在页码列表中的位置,定为6;

4、分页的开始页和结束页

只需要当前位置页码来定出来页码列表!

定下来页码列表只需要两样数据:

begin

end

10 11 12 13 14 (15) 16 17 18 19

需要使用pc来推算出begin和end

begin = pc – 5

end = pc + 4

5、开始页和结束页的计算公式

  • 如果总页数<=10(列表长度),那么begin=1,end=总页数
  • 使用公式计算;begin=pc-5, end=pc + 4;
  • 头溢出:当begin<1时,让begin=1
  • 尾溢出:当end>{tp}时,让end={tp}
代码语言:javascript
代码运行次数:0
运行
复制
<%-- 计算begin、end --%>
<c:choose>
	<%-- 如果总页数不足10页,那么把所有的页数都显示出来! --%>
	<c:when test="${pb.tp <= 10 }">
		<c:set var="begin" value="1" />
		<c:set var="end" value="${pb.tp }" />
	</c:when>
	<c:otherwise>
		<%-- 当总页数>10时,通过公式计算出begin和end --%>
		<c:set var="begin" value="${pb.pc-5 }" />
		<c:set var="end" value="${pb.pc+4 }" />	
		<%-- 头溢出 --%>
		<c:if test="${begin < 1 }">
			<c:set var="begin" value="1" />
			<c:set var="end" value="10" />
		</c:if>	
		<%-- 尾溢出 --%>
		<c:if test="${end > pb.tp }">
			<c:set var="begin" value="${pb.tp - 9 }" />
			<c:set var="end" value="${pb.tp }" />
		</c:if>	
	</c:otherwise>
</c:choose>
<%-- 循环遍历页码列表 --%>
<c:forEach var="i" begin="${begin }" end="${end }">
    <a href='<c:url value="/CustomerServlet?pc=${i}" />'>${i }</a>	
</c:forEach>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、分页页码展示
  • 2、最多显示多少个页码
  • 3、当前页(锚点)
  • 4、分页的开始页和结束页
  • 5、开始页和结束页的计算公式
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档