Ajax实现Test_Shop_SSM项目分页的功能

最新推荐文章于 2024-10-24 09:51:07 发布

Love_MinJuan

最新推荐文章于 2024-10-24 09:51:07 发布

阅读量267

点赞数

文章标签： ajax web spring

本文链接：https://blog.csdn.net/Love_MinJuan/article/details/106457405

版权

分页功能：

准备页面分页样式
准备分页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 &lt; #{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>&nbsp;
					</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>&nbsp;
								<a href="${pageContext.request.contextPath }/product/productSelectById.do?proId=${s.proId}">修改</a>&nbsp;
								<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>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<a>每页条目数:${pageSize }</a>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<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>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<!-- 如果当前页码等于总页码，那么 下一页 变为普通文本 -->
						<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>