一个简单的分页功能

最新推荐文章于 2024-09-25 15:35:16 发布

joy_lcy

最新推荐文章于 2024-09-25 15:35:16 发布

阅读量354

点赞数 1

分类专栏：网页

本文链接：https://blog.csdn.net/joy_lcy/article/details/94878483

版权

网页专栏收录该内容

1 篇文章

订阅专栏

<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>

实现的效果图如下：
在这里插入图片描述