web分页的步骤

分页类的内容

分页类是每次分页请求返回给前端的一个对象

• pageNo 前端传来的的当前页码(客户端传过来)
• pageTotal 总共的页码数量
• pageTotalCount 总记录数(要分页显示的信息总记录数)
• pageSize 每页显示数量(客户端传过来)
• items 当前页的数据集合

pageTotalCount->由sql语句count(*)获得
pageTotal->总记录数/每页大小,如果有余数则加1页
items->由sql语句select * from 表名 limit begin,pageSize
begin=(pageNo-1)*pageSize

总体流程

页数显示的几种情况
需求：显示 5 个连续的页码，而且当前页码在中间。除了当前页码之外，每个页码都可以点击跳到指定页。
情况 1：如果总页码小于等于 5 的情况，页码的范围是：1-总页码
1 页 1
2 页 1，2
3 页 1，2，3
4 页 1，2，3，4
5 页 1，2，3，4，5
情况 2：总页码大于 5 的情况。假设一共 10 页
小情况 1：当前页码为前面 3 个：1，2，3 的情况，页码范围是：1-5.
【1】2，3，4，5
1【2】3，4，5
1，2【3】4，5
小情况 2：当前页码为最后 3 个，8，9，10，页码范围是：总页码减 4 - 总页码

6，7【8】9，10
6，7，8【9】10
6，7，8，9【10】

小情况 3：4，5，6，7，页码范围是：当前页码减 2 - 当前页码加 2

2，3，4，5，6
3，4，5，6，7
4，5，6，7，8
5，6，7，8，9

 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="page_nav">
    <c:if test="${requestScope.page.pageNo>1}">
        <a href="${requestScope.page.url}&pageNo=1">首页</a>
        <a href="${requestScope.page.url}&pageNo=${requestScope.page.pageNo-1}">上一页</a>
    </c:if>

    <c:choose>
    <%--情况 1：如果总页码小于等于 5 的情况，页码的范围是：1-总页码--%>
        <c:when test="${requestScope.page.pageTotal<=5}">
            <c:set var="begin" value="1" />
            <c:set var="end"  value="${requestScope.page.pageTotal}" />
        </c:when>
	<%--情况 2：总页码大于 5 的情况--%>
        <c:when test="${requestScope.page.pageTotal>5}">
            <c:choose>
    	<%--小情况 1：当前页码为前面 3 个：1，2，3 的情况，页码范围是：1-5.--%>
                <c:when test="${requestScope.page.pageNo<=3}">
                    <c:set var="begin" value="1"/>
                    <c:set var="end" value="5"/>
                </c:when>
		<%--小情况 2：当前页码为最后 3 个，8，9，10，页码范围是：总页码减 4 - 总页码--%>
                <c:when test="${requestScope.page.pageNo>=requestScope.page.pageTotal-3}">
                    <c:set var="begin" value="${requestScope.page.pageTotal-4}"/>
                    <c:set var="end" value="${requestScope.page.pageTotal}"/>
                </c:when>
		<%--小情况 3：4，5，6，7，页码范围是：当前页码减 2 - 当前页码加 2--%>
                <c:otherwise>
                    <c:set var="begin" value="${requestScope.page.pageNo-2}"/>
                    <c:set var="end" value="${requestScope.page.pageNo+2}"/>
                </c:otherwise>
            </c:choose>

        </c:when>
    </c:choose>



    <c:forEach begin="${begin}" end="${end}" var="i" >
        <c:if test="${requestScope.page.pageNo==i}">
            [${i}]
        </c:if>
        <c:if test="${requestScope.page.pageNo!=i}">
            <a href="${requestScope.page.url}&pageNo=${i}">${i}</a>
        </c:if>
    </c:forEach>




    <c:if test="${requestScope.page.pageNo<requestScope.page.pageTotal}">
        <a href="${requestScope.page.url}&pageNo=${requestScope.page.pageNo+1}">下一页</a>
        <a href="${requestScope.page.url}&pageNo=${requestScope.page.pageTotal}">末页</a>
    </c:if>

    共${requestScope.page.pageTotal}页，${requestScope.page.pageTotalCount}条记录 到第<input value="${requestScope.page.pageNo}" name="pn" id="pn_input"/>页
    <input id="searchPageBtn" type="button" value="确定">

    <script>
        $(function () {
            $("#searchPageBtn").click(function () {
                var pageNo=$("#pn_input").val();

                location.href="${basePath}${requestScope.page.url}&pageNo="+pageNo;
            })
        })
    </script>
</div>