分页查看分类下的商品信息
程序员文章站
2022-04-25 09:15:16
...
开发流程
步骤
- 在分类标签绑定链接
<script>
$(function () {
$.post("${pageContext.request.contextPath}/categoryServlet", {"method": "findAllCats"}, function (dt) {
// jquery遍历数据
$.each(dt, function (i, obj) {
var li = "<li><a href='${pageContext.request.contextPath}/productServlet?method=findProductsByCidWithPage&num=1&cid=" + obj.cid + "'>" + obj.cname + "</a></li>";
$("#myUL").append(li);
});
});
});
</script>
- 在productServlet编写findProductsByCidWithPage方法,获取cid,num，调用业务层功能，查询分页形式下的当前类别下的商品信息，返回PageModel对象，将PageModel对象放入request，转发到/jsp/product_list.jsp
//findProductsByCidWithPage
public String findProductsByCidWithPage(HttpServletRequest request, HttpServletResponse response) throws Exception {
//获取cid,num
String cid = request.getParameter("cid");
int curNum = Integer.parseInt(request.getParameter("num"));
//调用业务层功能:以分页形式查询当前类别下商品信息
//返回PageModel对象(1_当前页商品信息2_分页3_url)
ProductService ProductService = new ProductServiceImp();
PageModel pm = ProductService.findProductsByCidWithPage(cid, curNum);
//将PageModel对象放入request
request.setAttribute("page", pm);
//转发到/jsp/product_list.jsp
return "/jsp/product_list.jsp";
}
- 编写PageModel类，存放分页相关数据
/**
* 存放分页相关的数据
*/
public class PageModel {
//基本属性
private int currentPageNum;//当前页数，由用户指定
private int pageSize = 5;//每页显示的条数，固定的
private int totalRecords;//总记录条数，数据库查出来的
private int totalPageNum;//总页数，计算出来的
private int startIndex;//每页开始记录的索引，计算出来的
private int prePageNum;//上一页
private int nextPageNum;//下一页
private List list;//已经分好页的结果集,该list中只有10条记录
//扩展属性
//一共每页显示9个页码按钮
private int startPage;//开始页码
private int endPage;//结束页码
//完善属性
private String url;
//要想使用我的分页，必须给我两个参数。一个是要看哪一页，另一个是总记录条数
public PageModel(int currentPageNum, int totalRecords, int pageSize) {
this.currentPageNum = currentPageNum;
this.totalRecords = totalRecords;
this.pageSize = pageSize;
//计算查询记录的开始索引
startIndex = (currentPageNum - 1) * pageSize;
//计算总页数
totalPageNum = totalRecords % pageSize == 0 ? (totalRecords / pageSize) : (totalRecords / pageSize + 1);
startPage = currentPageNum - 4; //5
endPage = currentPageNum + 4; //13
//看看总页数够不够9页
if (totalPageNum > 9) {
//超过了9页
if (startPage < 1) {
startPage = 1;
endPage = startPage + 8;
}
if (endPage > totalPageNum) {
endPage = totalPageNum;
startPage = endPage - 8;
}
} else {
//不够9页
startPage = 1;
endPage = totalPageNum;
}
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public int getStartPage() {
return startPage;
}
public void setStartPage(int startPage) {
this.startPage = startPage;
}
public int getEndPage() {
return endPage;
}
public void setEndPage(int endPage) {
this.endPage = endPage;
}
public int getPrePageNum() {
prePageNum = currentPageNum - 1;
if (prePageNum < 1) {
prePageNum = 1;
}
return prePageNum;
}
public int getNextPageNum() {
nextPageNum = currentPageNum + 1;
if (nextPageNum > totalPageNum) {
nextPageNum = totalPageNum;
}
return nextPageNum;
}
public int getCurrentPageNum() {
return currentPageNum;
}
public void setCurrentPageNum(int currentPageNum) {
this.currentPageNum = currentPageNum;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getTotalRecords() {
return totalRecords;
}
public void setTotalRecords(int totalRecords) {
this.totalRecords = totalRecords;
}
public int getTotalPageNum() {
return totalPageNum;
}
public void setTotalPageNum(int totalPageNum) {
this.totalPageNum = totalPageNum;
}
public int getStartIndex() {
return startIndex;
}
public void setStartIndex(int startIndex) {
this.startIndex = startIndex;
}
public void setPrePageNum(int prePageNum) {
this.prePageNum = prePageNum;
}
public void setNextPageNum(int nextPageNum) {
this.nextPageNum = nextPageNum;
}
public List getList() {
return list;
}
public void setList(List list) {
this.list = list;
}
}
- 编写业务层方法,统计当前分类下商品个数,以及每页的商品
@Override
public PageModel findProductsByCidWithPage(String cid, int curNum) throws Exception {
//1_创建PageModel对象 目的:计算分页参数
//统计当前分类下商品个数 select count(*) from product where cid=?
int totalRecords = productDao.findTotalRecords(cid);
PageModel pm = new PageModel(curNum, totalRecords, 12);
//2_关联集合 select * from product where cid =? limit ? ,?
List list = productDao.findProductsByCidWithPage(cid, pm.getStartIndex(), pm.getPageSize());
pm.setList(list);
//3_关联url
pm.setUrl("productServlet?method=findProductsByCidWithPage&cid=" + cid);
return pm;
}
- 编写dao层查询语句
- 统计当前分类下商品个数
@Override public int findTotalRecords() { String sql="select count(*) from product"; return template.queryForObject(sql, Integer.class); }- 每页的商品
@Override public List findProductsByCidWithPage(String cid, int startIndex, int pageSize) { String sql="select * from product where cid=? limit ? , ?"; return template.query(sql, new BeanPropertyRowMapper<>(Product.class),cid,startIndex,pageSize); } - 编写/jsp/product_list.jsp
<div class="row" style="width:1210px;margin:0 auto;">
<div class="col-md-12">
<ol class="breadcrumb">
<li><a href="${pageContext.request.contextPath}/">首页</a></li>
</ol>
</div>
<c:if test="${empty page.list}">
<div class="col-md-2">
<h1>暂无数据</h1>
</div>
</c:if>
<c:if test="${not empty page.list}">
<c:forEach items="${page.list}" var="p">
<div class="col-md-2">
<a href="${pageContext.request.contextPath}/productServlet?method=findProductByPid&pid=${p.pid}">
<img src="${pageContext.request.contextPath}/${p.pimage}" width="170" height="170"
style="display: inline-block;">
</a>
<p><a href="${pageContext.request.contextPath}/productServlet?method=findProductByPid&pid=${p.pid}"
style='color:green'>${p.pname}</a></p>
<p><span style="color: #FF0000; ">商城价：¥${p.shop_price}</span></p>
</div>
</c:forEach>
<%@ include file="/jsp/pageFile.jsp" %>
</c:if>
</div>
- 编写jsp/pageFile.jsp
<%--分页显示的开始 --%>
<div style="text-align:center">
共${page.totalPageNum}页/第${page.currentPageNum}页
<a href="${pageContext.request.contextPath}/${page.url}&num=1">首页</a>
<a href="${pageContext.request.contextPath}/${page.url}&num=${page.prePageNum}">上一页</a>
<%--显示的页码，使用forEach遍历显示的页面 --%>
<c:forEach begin="${page.startPage}" end="${page.endPage}" var="pagenum">
<a href="${pageContext.request.contextPath}/${page.url}&num=${pagenum}">${pagenum}</a>
</c:forEach>
<a href="${pageContext.request.contextPath}/${page.url}&num=${page.nextPageNum}">下一页</a>
<a href="${pageContext.request.contextPath}/${page.url}&num=${page.totalPageNum}">末页</a>
<input type="text" id="pagenum" name="pagenum" size="1"/><input type="button" value="前往" onclick="jump()" />
<script type="text/javascript">
function jump(){
var totalpage = ${page.totalPageNum};
var pagenum = document.getElementById("pagenum").value;
//判断输入的是一个数字
var reg =/^[1-9][0-9]{0,1}$/;
if(!reg.test(pagenum)){
//不是一个有效数字
alert("请输入符合规定的数字");
return ;
}
//判断输入的数字不能大于总页数
if(parseInt(pagenum)>parseInt(totalpage)){
//超过了总页数
alert("不能大于总页数");
return;
}
//转向分页显示的Servlet
window.location.href="${pageContext.request.contextPath}/${page.url}&num="+pagenum;
}
</script>
</div>
<%--分页显示的结束--%>