<%@ page contentType=”text/html;charset=UTF-8” language=”java” %>
<%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core“ %>

<%
pageContext.setAttribute(“path”,request.getContextPath());
%>

${path} <%— /SSM —%>
<%—搭建页面—%>

<%—标题—%>

SSM-CRUD

<%—按钮—%>

<%—列偏移—%>

<%—显示表格数据—%>

ID	姓名	性别	邮箱	部门	操作
${employee.empId}	${employee.empName}	${employee.gender}	${employee.email}	${employee.department.deptName}

<%—显示分页信息—%>

<%—分选，点选条—%>

<%—首页—%>

首页

<%—判断是否有上一页，有才执行—%>

<%—方式一：href=”${path}/list?pageNumber=${pageInfo.pageNum-1}” —%>
<%—上一页—%>

<%-当前页—%>

<%—判断当前页面显示中的每个页码中是否有个页码等于当前页码 —%>

${page_Num}<%—如果是当页面页码激活高亮状态—%>

${page_Num}<%—如果不是当前页码，禁用状态—%>

<%—下一页—%>

<%—方式一：—%>

<%—末页—%>

末页

<%—分页，信息条—%>

当前第
${pageInfo.pageNum}
页，共
${pageInfo.pages}
页，共
${pageInfo.total}
条记录

<%—引入jQuery—%>

<%—引入样式—%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>员工信息查询</title>
<%
    pageContext.setAttribute("path",request.getContextPath());
%>
</head>
<body>
${path}<%-- /SSM --%>
<%--搭建页面--%>
<div class="container">
    <%--标题--%>
    <div class="row">
        <div class=".col-lg-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
        <%--按钮--%>
    <div class="row ">
        <div class="col-md-4 col-md-offset-8"><%--列偏移--%>
            <button type="button" class="btn btn-success">新增</button>
            <button type="button" class="btn btn-danger">删除</button>
        </div>
    </div>
        <%--显示表格数据--%>
    <div class="row ">
        <div class="col-md-12">
            <table class="table table-hover">
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>邮箱</th>
                    <th>部门</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${pageInfo.list}" var="employee">
                    <tr>
                        <th>${employee.empId}</th>
                        <th>${employee.empName}</th>
                        <th>${employee.gender}</th>
                        <th>${employee.department.deptName}</th>
                        <th>工程部</th>
                        <th>
                            <button class="btn btn-primary">
                                <span class="glyphicon glyphicon-pencil btn-xs" aria-hidden="true"></span>
                                编辑
                            </button>
                            <button class="btn btn-danger">
                                <span class="glyphicon glyphicon-trash btn-xs" aria-hidden="true"></span>
                                删除
                            </button>
                        </th>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>
            <%--显示分页信息--%>
        <div class="row">
                <%--分选，点选条--%>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <%--首页--%>
                    <li>
                        <a href="${path}/list?pageNumber=1">首页</a>
                    </li>
                    <%--判断是否有上一页，有才执行--%>
                    <c:if test="${pageInfo.hasPreviousPage}">
                        <li>
                            <%--方式一：href="${path}/list?pageNumber=${pageInfo.pageNum-1}" --%>
                            <a href="${path}/list?pageNumber=${pageInfo.prePage}" aria-label="Previous"><%--上一页--%>
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    </c:if>
                    <%--遍历获取在页面需要连续显示的页码1、2、3、4、5、6、7、8--%>
                    <c:forEach items="${pageInfo.navigatepageNums}" var="page_Num">
                        <c:if test="${page_Num == pageInfo.pageNum}"><%--判断 当前页面显示中的每个页码中 是否有个页码等于 当前页码 --%>
                            <li class="active">
                                <a href="#" >${page_Num}</a><%--如果是当页面页码 激活高亮状态--%>
                            </li>
                        </c:if>
                        <c:if test="${page_Num != pageInfo.pageNum}" var="page_num">
                             <li>
                                 <a href="${path}/list?pageNumber=${page_Num}">${page_Num}</a><%--如果不是当前页码，禁用状态--%>
                             </li>
                        </c:if>
                    </c:forEach>
                    <%--判断有下一页才执行--%>
                    <c:if test="${pageInfo.hasNextPage}">
                        <li>
                            <%--方式一：<a href="${path}/list?pageNumber=${pageInfo.pageNum+1}" aria-label="Next">--%>
                            <a href="${path}/list?pageNumber=${pageInfo.nextPage}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </c:if>
                    <%--末页--%>
                    <li>
                        <a href="${path}/list?pageNumber=${pageInfo.pages}">末页</a>
                    </li>
                </ul>
            </nav>
            <%--分页，信息条--%>
            <div class="col-md-4">
                当前第
                ${pageInfo.pageNum}
                页，共
                ${pageInfo.pages}
                页，共
                ${pageInfo.total}
                条记录
            </div>
        </div>
    </div>
</div>
    <%--引入jQuery--%>
    <script type="text/javascript" src="${path}/static/script/jquery-1.7.2.js"></script>
    <%--引入样式--%>
    <link href="${path}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="${path}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

2.2.7、上下页、首末页、当前页

SSM-CRUD