JAVAWEB练习——前端与后端的分页功能

1.书写实体类

首先我们需要书写一个实体类，目的是将分页所需要的一些数据进行封装

public class PageBean<T> {
    //当前页
    private int currentPage;
    //当前页显示的条数
    private int currentCount;
    //总条数
    private int totalCount;
    //总页数
    private int totalPage;
    //每页显示的数据
    private List<T> list = new ArrayList<T>();

2.书写后端代码

WEB层

首先从前端接受当前的页数。并且设置好每一页需要显示的条数。将其传递给Service层，进行查询接受并返回。再将收集好的一页数据进行封装。

		ProductService service = new ProductService();
        //接受前端传来的参数
        String currentPageStr =request.getParameter("currentPage");
        if (currentPageStr == null) {
                currentPageStr="1";
        }
        int currentPage =Integer.parseInt(currentPageStr);
        //每页显示多少条数据
        int currentCount =12;
        PageBean<Product> pageBean =null;
        try {
            pageBean = service.findPageBean(currentPage,currentCount);
        } catch (SQLException e) {
            e.printStackTrace();
        }

        request.setAttribute("pageBean",pageBean);

Service层

在service层进行两个数据封装，从web层传递过来的当前页，以及当前页显示的条数。
从Dao层进行数据库查询，主要查询的有一共有多少条数据，以及我们通过计算，如何根据总数据来计算出一共需要分多少页。

//分页操作
    public PageBean<Product> findPageBean(int currentPage,int currentCount) throws SQLException {
        ProductDao  dao= new ProductDao();
        //设法封装一个PageBean并返回
        PageBean pageBean = new PageBean();
        //当前页1.private int currentPage;
        pageBean.setCurrentPage(currentPage);
        //当前页显示的条数2.private int currentCount;
        pageBean.setCurrentCount(currentCount);
        //总条数3.private int totalCount;
        int totalCount= dao.getTotalCount();
        pageBean.setTotalCount(totalCount);
        //总页数4.private int totalPage;
        /*
        * 总条数     当前页显示的条数      总页数
        * 公式：总页数=Math.ceil（总条数/当前显示的条数）
        *
        * */
        int totalPage = (int) Math.ceil(1.0*totalCount/currentCount);
        pageBean.setTotalPage(totalPage);
        //5.每页显示的数据5.private List<T> productList = new ArrayList<T>();
        /*
        *   页数与limit起始索引关系
        *   例如：每页显示4条
        * 页数      起始索引     每页显示条数
        *   1           0           4
        *   2           4           4
        *   3           8           4
        *   4           12          4
        *   第一页 limit 0，4
        *   第二页 limit 4，4
        *   第三页 limit 8，4
        * 索引 index= （当前页数-1）*每页显示的条数
        *
        * */
        int index = (currentPage-1)*currentCount;
        List<Product> productList= dao.findProductListForPage(index,currentCount);
        pageBean.setProductList(productList);
        return  pageBean;
    }

Dao层

//获得全部商品的条数
    public int getTotalCount() throws SQLException {
        QueryRunner queryRunner =new QueryRunner(DataSourceUtils.getDataSource());
        String sql="SELECT COUNT(*) FROM product";
        Long query = (Long) queryRunner.query(sql, new ScalarHandler());
        return query.intValue();
    }
    //通过分页的商品数据
    public List<Product> findProductListForPage(int index,int currentCount) throws SQLException {
        QueryRunner queryRunner = new QueryRunner(DataSourceUtils.getDataSource());
        String sql = "SELECT * FROM product limit ?,?";
        return queryRunner.query(sql,new BeanListHandler<Product>(Product.class),index,currentCount);
    }

3.前端代码

遍历一个分页的商品

<c:forEach items="${pageBean.productList}" var="product">
		<div>
			<a href="product_info.htm">
				<img src="${pageContext.request.contextPath}/${product.pimage}">
			</a>
			<p>
				<a href="#">${product.pname}</a>
			</p>
			<p>
				<font >商城价：&yen;${product.shop_price}</font>
			</p>
		</div>
		</c:forEach>

此处，我们通过点击我们的每一个小的div给Servlet传递当前页参数，引发service层调用dao层查询数据的所有数据

<!--分页 -->
		<div >
			<ul >
				<%--上一页--%>
				<%--判断当前页是否是第一页--%>
				<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}/ProductListServlet?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}/ProductListServlet?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}/ProductListServlet?currentPage=${pageBean.currentPage+1}" aria-label="Next">
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li>
					</c:if>



		</ul>
	</div>