在完成后台代码的前提下实现：

servlet代码改动以下位置

image.png

前端页面代码改动：

    <!--分页 -->
    <div style="width: 380px; margin: 0 auto; margin-top: 50px;">
        <ul class="pagination" style="text-align: center; margin-top: 10px;">
            <!-- 上一页 -->
            <!-- 判断当前页是否是第一页 -->
            <c:if test="${pageBean.currentPage==1 }">
                <li class="disabled">
                    <a href="javascript:void(0)" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </c:if>
            <c:if test="${pageBean.currentPage!=1 }">
                <li>
                    <a href="${pageContext.request.contextPath }/productList?currentPage=${pageBean.currentPage-1 }" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </c:if>
                    
            <c:forEach begin="1" end="${pageBean.totalPage }" var="page">
                <!-- 判断当前页 -->
                <c:if test="${pageBean.currentPage==page }">
                    <li class="active"><a href="javascript:void(0)"}>${page}</a></li>
                </c:if>
                <c:if test="${pageBean.currentPage!=page }">
                    <li><a href="${pageContext.request.contextPath }/productList?currentPage=${page}">${page}</a></li>
                </c:if>
            </c:forEach>
            
            <!-- 下一页 -->
            <!-- 判断是否是最后一页 -->
            <c:if test="${pageBean.currentPage==pageBean.totalPage }">
                <li class="disabled">
                    <a href="javascript:void(0)" aria-label="Next"> 
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </c:if>
            <c:if test="${pageBean.currentPage!=pageBean.totalPage }">
                <li>
                    <a href="${pageContext.request.contextPath }/productList?currentPage=${pageBean.currentPage+1 }" aria-label="Next"> 
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </c:if>
            
        
            <!-- <li class="disabled"><a href="#" aria-label="Previous"><span
                    aria-hidden="true">&laquo;</span></a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span>
            </a></li> -->
        </ul>
    </div>
    <!-- 分页结束 -->

做分页查询，最重要的且难点就是PageBean实体类的编写：

image.png