14_按类别分页展示商品

按类别分页展示商品

• 步骤分析
• 代码实现

---

1）步骤分析

1. 在菜单上点击一个分类:< a href="${path}/product/page?cid=xxx&currPage=xxx">…< /a>
2. page操作：
   • 接收cid类别编写，currPage页码和设置每页显示的条数
   • 调用service返回一个PageBean(list,currPage,pageSize,pageCount,count)
   • 绑定pageBean对象，请求转发
3. 在service中封装为PageBean对象
4. 在product_list.jsp页面上展示数据

---

2）代码实现

① 创建PageBean对象

public class PageBean<E> {
	private List<E> list;
	private Integer currPage;
	private Integer pageSize;
	private Integer count;
	private Integer totalPage;
	//便于方便提供一个构造方法
	public PageBean(List<E> list, Integer currPage, Integer pageSize, Integer count) {
		super();
		this.list = list;
		this.currPage = currPage;
		this.pageSize = pageSize;
		this.count = count;
	}
	public PageBean() {
		super();
	}
	//总页数由总记录数和每页显示条数计算而来
	public Integer getTotalPage() {
		return (int) Math.ceil(count*1.0/pageSize);
	}
	//其余getter和setter略
}

② 更改分类展示head.jsp

默认是第一页，currPage是1

$ul.append($("<li><a href='${path}/product/page?currPage=1&cid="+this.cid+"'>"+this.cname+"</a></li>"));

③ 在ProductServlet中处理请求

private void page(HttpServletRequest request, HttpServletResponse response) throws Exception{
	//1、获取请求参数
	//1.1 获取currPage页码
	Integer currPage=Integer.parseInt(request.getParameter("currPage"));
	//默认每页显示12个
	Integer pageSize=12;
	//1.2 获取cid
	String cid=request.getParameter("cid");
	
	//2、调用service执行分页查询
	PageBean<Product> page=productService.page(currPage,pageSize,cid);
	//3、绑定数据
	request.setAttribute("page", page);
	
	//4、请求转发
	request.getRequestDispatcher("/jsp/product_list.jsp").forward(request, response);
}

④完成service层

@Override
public PageBean<Product> page(Integer currPage, Integer pageSize, String cid) throws Exception {
	
	//1、调用dao执行分页查询
	List<Product> list=productDao.page(currPage,pageSize,cid);
	
	//2、调用dao执行查询总条数
	int count =productDao.count(cid);
	
	return new PageBean<Product>(list, currPage, pageSize, count);
}

⑤实现dao层

@Override
public List<Product> page(Integer currPage, Integer pageSize, String cid) throws Exception {
	String sql="select pid,pname,market_price marketPrice,shop_price shopPrice,"
			+ "pimage,pdate,is_hot isHot,pdesc,pflag,cid  from `product` "
			+ "where cid=? limit ?,?";
	return qr.query(sql, new BeanListHandler<>(Product.class),cid,(currPage-1)*pageSize,pageSize);
}

@Override
public int count(String cid) throws Exception {
	String sql="select count(pid) form `product` where cid=?";
	return ((Long)qr.query(sql, new ScalarHandler(),cid)).intValue();
}

⑥ 页面展示数据

⑦ 测试

商品名字太长的一部分隐藏为…
导入fn标签库：

<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

把名字进行处理，超过截取前10个字符，多出来的使用 “…” 展示

<a href="${path }/product/particulars?pid=${pro.pid}" style='color:green'>
	${fn:substring(pro.pname,0,10) }...
</a>

⑧ 分页

<!--分页 -->
<div style="width:380px;margin:0 auto;margin-top:50px;">
		<ul class="pagination" style="text-align:center; margin-top:10px;">
			
			<!-- 判断当前页是否是首页(有无上一页) -->
			<c:if test="${page.currPage==1 }">
				<!-- 不可用disabled -->
				<li class="disabled"><a href="javascript:void(0)" aria-label="Previous">
					<span aria-hidden="true">&laquo;</span></a>
				</li>
			</c:if>
			<c:if test="${page.currPage!=1 }">
				<!-- 可用 -->
				<li><a href="${path }/product/page?currPage=${page.currPage-1}&cid=${param.cid}" aria-label="Previous">
					<span aria-hidden="true">&laquo;</span></a>
				</li>
			</c:if>
			
			<!-- 展示所有的页码 -->
			<c:forEach begin="1" end="${page.totalPage }" var="n">
				<!-- 判断是否是当前页 -->
				<c:if test="${page.currPage==n }">
					<li class="active"><a href="javascript:void(0)">${n }</a></li>
				</c:if>
				<c:if test="${page.currPage!=n }">
					<li ><a href="${path }/product/page?currPage=${n}&cid=${param.cid}">${n }</a></li>
				</c:if>
			</c:forEach>
			
			<!-- 判断是否是尾页(有无下一页) -->
			<c:if test="${page.currPage==page.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="${page.currPage!=page.totalPage }">
				<li>
					<a href="${path }/product/page?currPage=${page.currPage+1}&cid=${param.cid}" aria-label="Next">
						<span aria-hidden="true">&raquo;</span>
					</a>
				</li>
			</c:if>
			
		</ul>
	</div>

测试：

⑨ 分页页码前四后三

假设如果商品过多，例如100页，则在页码区域会全部显示为1~100，不合理，要求做到当页码过多时，只展示当前页的前5个后4页：

<c:forEach begin="${page.currPage-4>0?page.currPage-4:1 }" 
end="${page.currPage+3>page.totalPage?page.totalPage:page.currPage+3 }" var="n">
	...
</c:forEach>

在后台将每页显示先改为2条测试一下：

再把每页显示条数更改回来。