JSP中数据分页的实现

分页查询的实现

1) 首先创建一个pageBean，包含pageIndex(页码索引)、total（页码总数）、pageSize（每页容量）、tar(分页条)、dataList(数据对象集) 属性

// 页码索引
private int pageIndex;
// 每页的容量
private int pageSize;
// 总页数
private int pageCount;
// 分页后的数据集合
private List<?> dataList;
// 数据总条数
private int total;
// 准备一个集合显示分页条数
private int[] bar;

2) 利用js，在页面加载的时候调用分页查询的servlet，此时pageIndex=1。

3) 在servlet中接收到页面传递来的页码，调用service层分页查询的方法，将返回的pageBean对象存放到request域中，转发商品列表页面；

/**
* 分页查询商品
*/
private void findProdByPage(HttpServletRequest request, HttpServletResponse response) {
// 接收页码
int pageIndex = Integer.parseInt(request.getParameter("pageIndex"));
ProductService productService = new ProductServiceImpl();
PageBean pageBean = productService.findProdByPage(pageIndex);
request.setAttribute("pageBean", pageBean);
try {
request.getRequestDispatcher("/product_list.jsp").forward(request, response);
} catch (Exception e) {
e.printStackTrace();
}
}

4）在service层定义每页的数据容量pageSize，调用dao层getCount()获取总的记录数total, 根据记录数和每页数据容量计算出总页数；再根据当前页码和每页记录数调用dao层findProdByPage(start, pageSize)方法查询出当前页码要显示的的数据集dataList，最后对每页数据容量、当前页码、总记录数、当前页码数据集、总页数进行封装，返回到web层。

/**
* 分页查询商品信息
*/
public PageBean findProdByPage(int pageIndex) {
// 1、total总记录数
int total = 0;
List<Product> dataList = null;
try {
total = productDao.getCount();
} catch (SQLException e1) {
e1.printStackTrace();
}
// 2、一页显示多少个数据
int pageSize = 18;
// 3、计算总页数
int pageCount = total % pageSize == 0 ? (total / pageSize) : (total / pageSize) + 1;
// 5、调用dao层获取分页后的数据
try {
// 当前页的开始检索的数据索引（start）为（当前页码-1）*每页数据容量
dataList = productDao.findProdByPage((pageIndex - 1) * pageSize, pageSize);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

// 封装数据
PageBean pageBean = new PageBean();

pageBean.setTotal(total);
pageBean.setPageCount(pageCount);
pageBean.setPageIndex(pageIndex);
pageBean.setDataList(dataList);
pageBean.setPageSize(pageSize);

return pageBean;
}

5）dao层首先获取总记录数，返回给service层，再利用limit查询出当前页码数据集返回给service。

/**
* 获取商品总数
* @throws SQLException
*/
public int getCount() throws SQLException {
String sql = "select count(*) from product";
int pageCount = Integer.parseInt(String.valueOf(queryRunner.query(sql, new ScalarHandler<Long>())));
return pageCount;

}

/**
* 获取分页商品信息
* @throws SQLException
*/
public List<Product> findProdByPage(int begin, int pageSize) throws SQLException {
// sql 语句和参数
String sql = "select * from product limit ?, ?";
Object[] params = {begin, pageSize};
// 返回分页查询的数据
List<Product> productList = queryRunner.query(sql, new BeanListHandler<Product>(Product.class), params);
return productList;
}

6）JSP页面的显示。利用jstl遍历，获取到request域中的pageBean的数据集中每条数据的信息。再根据当前页码、码总页进行遍历显示所有页。如果不是第一页，点击向左翻页，当前页码减1；如果不是最后一页，点击向右翻页，当前页码加1。

<c:forEach var="product" items="${pageBean.dataList}">
<div class="col-md-2" style="height: 230px">
<a href="${pageContext.servletContext.contextPath}/product?info=getProdInfo&pid=${product.pid}">
<img src="${product.pimage}" width="170" height="170" style="display: inline-block;">
</a>
<p>
<a href="${pageContext.servletContext.contextPath}/product?info=getProdInfo&pid=${product.pid}" style='color: green'>${product.pname}</a>
</p>
<p>
<font color="#FF0000">商城价：¥${product.shop_price}</font>
</p>
</div>
</c:forEach>


<div style="width: 380px; margin: 0 auto; margin-top: 50px;">
<ul class="pagination" style="text-align: center; margin-top: 10px;">


<c:if test="${pageBean.pageIndex == 1}">
<li class="disabled">
<a href="javascript:void(0)" aria-label="Previous"><span aria-hidden="true">«</span></a>
</li>
</c:if>
<c:if test="${pageBean.pageIndex != 1}">
<li class="disabled">
<a href="${root}/product?info=findProdByPage&pageIndex=${pageBean.pageIndex-1}" aria-label="Previous"><span aria-hidden="true">«</span></a>
</li>
</c:if>

<c:forEach begin="1" end="${pageBean.pageCount}" var="pageNum">

<c:if test="${pageBean.pageIndex == pageNum}">
<li class="active"><a href="javascript:void(0)">${pageNum}</a></li>
</c:if>
<c:if test="${pageBean.pageIndex != pageNum}">
<li class="active"><a href="${root}/product?info=findProdByPage&pageIndex=${pageNum}">${pageNum}</a></li>
</c:if>

</c:forEach>

<c:if test="${pageBean.pageIndex == pageBean.pageCount}">
<li>
<a href="javascript:void(0)" aria-label="Next"><span aria-hidden="true">»</span></a>
</li>
</c:if>
<c:if test="${pageBean.pageIndex != pageBean.pageCount}">
<li>
<a href="${root}/product?info=findProdByPage&pageIndex=${pageBean.pageIndex+1}" aria-label="Next"><span aria-hidden="true">»</span></a>
</li>
</c:if>
</ul>
</div>

JSP中数据分页的实现

猜你喜欢