<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<title>分页</title>
<body>
<p> 当前 ${pageInfo.pageNum } 页，总 ${pageInfo.pages } 页，总 ${pageInfo.total } 条记录</p>
<ul class="pager">
<li class="am-pagination-first "><a href="findUsers?page=1&size=5" aria-label="Previous">第一页</a> </li>
<li class="am-pagination-prev "><a href="findUsers?page=${pageInfo.pageNum-1}&size=5">上一页</a> </li>
<c:forEach begin="1" end="${pageInfo.pages}" var="pageNum">
<li><a href="findUsers?page=${pageNum}&size=5">${pageNum}</a></li></c:forEach>
<li class="am-pagination-next "><a href="findUsers?page=${pageInfo.pageNum+1}&size=5">下一页</a></li>
<li class="am-pagination-last "><a href="findUsers?page=${pageInfo.pages}&size=5" aria-label="Next">最末页</a></li>
</ul>
</body>
</html>
实现的效果图如下：
这里的界面有点奇怪，分页按钮有点长，但其实它本来的效果应该是这样↓
因为和我项目里的bootstrap.mini.css的pager类重复了，但这个文件是只能读不能改的，所以长度会这么长
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
