分页前端的显示 仿百度

时间:2022-12-20 10:12:31

page_nav.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div align="center">
<!--******************** 设置上一页和下一页******************************** -->
<c:set var="previousPage" value="${requestScope.pageStu.currentPage - 1 }"></c:set>
<c:set var="nextPage" value="${requestScope.pageStu.currentPage + 1 }"></c:set>
<c:if test="${previousPage <= 0 }">
<c:set var="previousPage" value="1"></c:set>
</c:if>
<c:if test="${nextPage > requestScope.pageStu.totalPage }">
<c:set var="nextPage" value="${requestScope.pageStu.totalPage }"></c:set>
</c:if>
<!-- ********************************************************************** -->
<a href="${pageStu.path}&currentPage=1">首页</a>
<a href="${pageStu.path}&currentPage=${previousPage}">上一页</a>
<!--******************** 设置显示的第一页和最后一页的数目******************************** -->
<c:choose>
<c:when test="${requestScope.pageStu.totalPage <= 5 }">
<c:set var="begin" value="1"></c:set>
<c:set var="end" value="${requestScope.pageStu.totalPage }"></c:set>
</c:when>
<c:when test="${requestScope.pageStu.currentPage <= 3 }">
<c:set var="begin" value="1"></c:set>
<c:set var="end" value="5"></c:set>
</c:when>
<c:otherwise>
<c:set var="begin" value="${requestScope.pageStu.currentPage - 2 }"></c:set>
<c:set var="end" value="${requestScope.pageStu.currentPage + 2 }"></c:set>
<c:if test="${end > requestScope.pageStu.totalPage }">
<c:set var="begin" value="${requestScope.pageStu.totalPage - 4 }"></c:set>
<c:set var="end" value="${requestScope.pageStu.totalPage }"></c:set>
</c:if>
</c:otherwise>
</c:choose>
<c:forEach begin="${begin }" end="${end }" var="num">
<c:if test="${num eq requestScope.pageStu.currentPage }">
【${num }】
</c:if>
<c:if test="${num != requestScope.pageStu.currentPage }">
${num }
</c:if>
</c:forEach>
<a href="${pageStu.path}&currentPage=${nextPage}">下一页</a>
<a href="${pageStu.path}&currentPage=${requestScope.pageStu.totalPage}">末页</a>
共有${requestScope.pageStu.totalPage }页,共有${requestScope.pageStu.totalRecord }条记录
<input value="${pageStu.totalPage }" name = "pn" id ="pn_input"/>页
<input type="button" value="跳转" id="btn_id" onclick="gotoPage()"/>
</div>
<script type="text/javascript">
function gotoPage(){
var value= document.getElementById("pn_input").value;
window.location="${pageStu.path}&currentPage="+value;
}
</script>

在主界面直接include即可。


下面的链接为后台的分页代码:

http://blog.csdn.net/gpf951101/article/details/77184971