分页功能:
- 准备页面分页样式
- 准备分页SQL
- 分析页面入参和后台SQL参数的关系
- 功能实现:
4.1 首页分页
4.2 显示当前页码和每页条目数
4.3 实现上一页/下一页功能
4.4 显示总页码
4.5 bug修复
1、Mapper文件:
<!-- ROWNUM 分页查询 -->
<select id="selectByPage" resultMap="BaseResultMap">
SELECT * FROM(
SELECT ROWNUM rn,t.* FROM (
SELECT * FROM product ORDER BY 1)t
)WHERE rn < #{end} AND rn > #{first}
</select>
<!-- 查询总行数 -->
<select id="selectCount" resultType="java.lang.Integer">
SELECT COUNT(1) FROM product
</select>
2、Dao层
//ROWNUM 分页查询
public List<Product> selectByPage(@Param("end")int end,@Param("first")int first);
//查询总行数
public int selectCount();
3、Service层
//ROWNUM 分页查询
public List<Product> selectByPageLogin(int pageIndex,int pageSize);
//查询总行数
public int selectLoginCount();
4、Service实现层
//ROWNUM 分页查询
public List<Product> selectByPageLogin(int pageIndex,int pageSize){
int end = pageIndex * pageSize+1;
int first = (pageIndex-1) * pageSize;
List<Product> list = productDao.selectByPage(end,first);
return list;
}
//查询总行数
public int selectLoginCount() {
int count = productDao.selectCount();
return count;
}
5、SpringJunit测试
//ROWNUM 分页查询
@Test
public void method6(){
List<Product> list = productService.selectByPageLogin(3,10);
for (Product p : list) {
System.out.println(p);
}
}
//查询总行数
@Test
public void method7(){
int count = productService.selectLoginCount();
int pageSize=5;
int totalPage=0;
//三元表达式
totalPage = count%pageSize ==0 ? count/pageSize : count/pageSize+1;
System.out.println(totalPage);
}
6、Controller层
//ROWNUM 分页查询
@RequestMapping("/ProductByPageController")
public String selectByPageLogin(Model model,HttpServletRequest request) {
//获取页面参数
String pageIndexStr = request.getParameter("pageIndex");
String pageSizeStr = request.getParameter("pageSize");
//参数判断
if (pageIndexStr !=null) {
pageIndex = Integer.parseInt(pageIndexStr);
}
if (pageSizeStr !=null) {
pageSize = Integer.parseInt(pageSizeStr);
}
//获取商品列表
List<Product> list = productService.selectByPageLogin(pageIndex, pageSize);
//初始化总页数
int totalPage=0;
//计算总页数
int count = productService.selectLoginCount();
//三元表达式
totalPage = count%pageSize ==0 ? count/pageSize : count/pageSize+1;
//存入数据
model.addAttribute("list", list);
model.addAttribute("pageIndex", pageIndex);
model.addAttribute("pageSize", pageSize);
model.addAttribute("totalPage", totalPage);
return "admin/product/ProductList";
}
7、前端Ajax代码
//执行ajax
$.ajax({
url:"${pageContext.request.contextPath }/client/ajaxLogin.do",
type:"POST",
data:{"cliName":cliName,"cliPassword":cliPassword},
success:function(data){
console.log("data:"+data);
//判断用户名
if (data == "true"){//若用户名存在且密码正确
window.location.href='${pageContext.request.contextPath }/product/ProductByPageController.do';
}else if (data == "false"){//密码错误,登录失败
$("#errorMsg").html("密码错误!");
}else if (data == "nofound"){//用户名不存在
$("#errorMsg").html("账号不存在!");
}
},
error:function(xhr, textStatus, errorThrown){
/*错误信息处理*/
console.log("进入error---");
console.log("状态码:"+xhr.status);
console.log("状态:"+xhr.readyState);//当前状态,0-未初始化,1-正在载入,2-已经载入,3-数据进行交互,4-完成
console.log("错误信息:"+xhr.statusText );
console.log("返回响应信息:"+xhr.responseText );//这里是详细的信息
console.log("请求状态:"+textStatus);
console.log(errorThrown);
console.log("请求失败");
},
dataType:"json"
});
8、前端商品展示页代码
<%@page import="com.rj182.entity.Product"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>商品列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--引用CSS样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css" />
</head>
<body>
<div id="wrap">
<div id="top_content">
<div id="header">
<div id="rightheader">
<p>
<fmt:formatDate value="${sessionScope.date }" pattern="yyyy-MM-dd HH:mm:ss" />
<br />
</p>
</div>
<div id="topheader">
<h1 id="title">
<a href="#">商品管理</a>
</h1>
</div>
<div id="navigation">
</div>
</div>
<div id="content">
<p id="whereami">
<a href="${pageContext.request.contextPath }/product/productReturn.do" style='color:red'>返回登录页</a>
</p>
<h1>
${realName },欢迎您!
</h1>
<form action="${pageContext.request.contextPath }/product/productBatchDelete.do" method="post">
<table class="table">
<tr class="table_header">
<td>
<input type="submit" value="删除选中" />
</td>
<td>
ID
</td>
<td>
商品名
</td>
<td>
单价
</td>
<td>库存</td>
<td>状态</td>
<td>添加时间</td>
<td>
商品描述
</td>
<td>
操作
</td>
</tr>
<!--商品查询 接受action数据 循环输出 -->
<%-- <%
List<Product> list = (List<Product>)request.getAttribute("list");
for(Product p : list){
%> --%>
<c:forEach var='s' items="${list }">
<tr class="row1">
<td>
<input type="checkbox" name="id" value="${s.proId}" />
</td>
<td>
${s.proId}
</td>
<td>
${s.proName}
</td>
<td>
${s.proPrice}
</td>
<td>${s.proCount}</td>
<td>
<c:set var='v' value="<font color='red'>下架</font>" scope='page' />
${s.proStatus eq 1?"上架": v}
</td>
<td>${s.proCreateDate}</td>
<td>
${s.proBrief}
</td>
<td>
<a href="${pageContext.request.contextPath }/product/productDelete.do?proId=${s.proId}">删除</a>
<a href="${pageContext.request.contextPath }/product/productSelectById.do?proId=${s.proId}">修改</a>
<a href="${pageContext.request.contextPath }/product/productChangeStatus.do?proId=${s.proId}">${s.proStatus eq 1?"下架":"上架"}</a>
</td>
</tr>
</c:forEach>
</table>
</form>
<p>
<a href="${pageContext.request.contextPath }/admin/product/addProduct.jsp" class="button">添加商品</a>
</p>
<p style='color:red' id="textError">
${textError}
</p>
<!-- 分页操作 -->
<p style="text-align: center;">
<a>当前页码:${pageIndex }</a>
<a>每页条目数:${pageSize }</a>
<a>总页码数:${totalPage }</a>
</p>
<p style="text-align: center;">
<!-- 如果当前页码小于2,那么 上一页 变为普通文本 -->
<c:if test="${pageIndex <2}">
<a>上一页</a>
</c:if>
<!-- 如果当前页码大于1,那么 上一页 变为超链接 -->
<c:if test="${pageIndex >1}">
<a href="${pageContext.request.contextPath}/product/ProductByPageController.do?pageIndex=${pageIndex -1}&&pageSize=${pageSize}" >上一页</a>
</c:if>
<!-- 如果当前页码等于总页码,那么 下一页 变为普通文本 -->
<c:if test="${pageIndex == totalPage}">
<a>下一页</a>
</c:if>
<!-- 如果当前页码小于总页码,那么 下一页 变为超链接 -->
<c:if test="${pageIndex < totalPage}">
<a href="${pageContext.request.contextPath}/product/ProductByPageController.do?pageIndex=${pageIndex +1}&&pageSize=${pageSize}" >下一页</a>
</c:if>
</p>
</div>
</div>
<div id="footer">
<div id="footer_bg">
www.zparkhr.com.cn
</div>
</div>
</div>
</body>
</html>