您现在的位置:首页 >> 前端 >> 内容

仿百度的分页前端显示

时间:2017/8/17 9:13:00 点击:

  核心提示:page_nav.jsp%@ page language=java contentType=text/html; charset=UTF-8pageEncoding=UTF-8%p align=cen...

page_nav.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<p 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()"/>  
    </p>  
    <script type="text/javascript">  
        function gotoPage(){  
            var value= document.getElementById("pn_input").value;  
            window.location="${pageStu.path}&currentPage="+value;  
        }  
    </script>  

在主界面直接include即可。

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

https://blog.csdn.NET/gpf951101/article/details/77184971

作者:网络 来源:gpf951101的