JavaWeb(AJAX实现分页)

一、首先先导jQuery类库

二、编写底层代码：

代码如下：

①获取任意表格中的总记录数

/**
	 * 获取任意表格中的总记录数
	 */
	public Integer getTableCount(String tableName,String searchName) {
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		String sql = "";
		// 2.给对应的对象及变量赋值
		try {
			// 获取链接
			conn = DBHelper.getConn();
			// sql
			sql = "select count(*) from "+tableName +" where gname like '%"+searchName+"%'";
			// 执行sql语句
			ps = conn.prepareStatement(sql);
			// 返回结果集
			rs = ps.executeQuery();
			// 遍历结果集
			if (rs.next()) {
				return rs.getInt(1);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			DBHelper.myClose(conn, ps, rs);
		}
		// 3.返回结果
		return 0;
	}

②模糊查询的方法

public List<Goods> queryGoodsListAll(int pageIndex, int pageSize, String searchName) {
		// 1.定义对应的三兄弟以及其它相关变量
				Connection conn = null;
				PreparedStatement ps = null;
				ResultSet rs = null;
				String sql = "";
				Goods goods = null;
				List<Goods> list = new ArrayList<Goods>();
				
				int start = (pageIndex-1)*pageSize +1;
				int end = pageIndex * pageSize;
				
				//莫老弟
				
				// 2.给对应的对象及变量赋值
				try {
					// 获取链接
					conn = DBHelper.getConn();
					// sql
					sql = "select b.* from ( select a.* , rownum as rid from ( select * from tb_goods where gname like '%"+searchName+"%' ) a ) b where b.rid between "+start+" and "+end+"";
					// 执行sql语句
					ps = conn.prepareStatement(sql);
					// 返回结果集
					rs = ps.executeQuery();
					// 遍历结果集
					while (rs.next()) {
						goods = new Goods();
						goods.setGid(rs.getInt("gid"));
						goods.setGname(rs.getString("gname"));
						goods.setGtype(rs.getString("gtype"));
						goods.setGimage(rs.getString("gimage"));
						goods.setGprice(rs.getInt("gprice"));
						goods.setGkc(rs.getInt("gkc"));
						goods.setGinfo(rs.getString("ginfo"));
						// 添加集合
						list.add(goods);
					}
				} catch (SQLException e) {
					e.printStackTrace();
				} finally {
					DBHelper.myClose(conn, ps, rs);
				}
				// 3.返回结果
				return list;
	}

三、servlet代码：

private IGoodsBiz igb = new GoodsBizImpl();
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 1.设置字符集编码
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		int pageIndex = 1;
		int pageSize = 2;
		
		String searchName = request.getParameter("searchName");
		if(searchName == null) {
			searchName = "";
					
		}
		//获取总记录数
		int pageCount = new BaseDao().getTableCount("tb_goods",searchName);
		//根据总记录数和每页显示的条数   求得最大页码
		int pageMax = pageCount / pageSize;
		if(pageCount % pageSize !=0) {
			pageMax++;
		}
		
		
		
		String pIndex = request.getParameter("pageIndex");
		if(null!=pIndex) {
			pageIndex = Integer.valueOf(pIndex);
		}
		
	
		
		
		
		
		
		
		
		List<Goods> adminGoodsList = igb.queryGoodsListAll(pageIndex, pageSize,searchName);
		
		PrintWriter out = response.getWriter();
		//创建JSON工具
		ObjectMapper mapper = new ObjectMapper();
		//String result = mapper.writeValueAsString(adminGoodsList);
		
		//通过ajax传输数据从后台---前台 有多个值  使用map集合
		Map<String,Object> maps = new HashMap<String, Object>();
		maps.put("adminGoodsList", adminGoodsList);
		maps.put("pageMax", pageMax);
		
		String result = mapper.writeValueAsString(maps);
		
		out.write(result);
		out.flush();
		out.close();
		
		
		
		
	}

四、显示层代码：

<script type="text/javascript" src = "js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	//获取全路径
	var path = "${pageContext.request.servletContext.contextPath }";
	
	//定义全局变量保存当前的页码
	let pageIndex = 1;
	let pageMax = 0;//初始化最大页码
	

	//本节课重点L利用AJAX来实现数据分页
	$(function(){
		//alert(123);
		//调用post方法  传入servlet中拿到数据后 返回出来
		indexLoad("");
		
		
		$("#searchBtn").click(function(){
			//获取输入框的值
			 let searchName = $("#searchName").val();
			 //alert(searchName);
			 indexLoad(searchName);
		});
		
		
		
	})

	//封装  数据加载的post请求
	function indexLoad(searchName){
		$.post(path+"/adminGoodsList.do",{"pageIndex":pageIndex,"searchName":searchName},function(msg){
			//alert(msg);
			//后台传递过来的数据是字符串，满足JSON格式的定义
			let list = $.parseJSON(msg);
			//servlet中传递过来的最大页码
			pageMax = list.pageMax;
			
			
			
			let str = "<table border = \"1\" cellspacing = \"0\" cellpadding = \"0\" width = \"100%\">";
			str+="<tr>";
			str+="<th>商品编号</th>";
			str+="<th>商品名称</th>";
			str+="<th>商品类型</th>";
			str+="<th>商品图片</th>";
			str+="<th>商品价格</th>";
			str+="<th>商品库存</th>";
			str+="<th>商品简介</th>";
			str+="<th>操作</th>";
			str+="</tr>";
			
			
			//console.log(list.adminGoodsList);
			$.each(list.adminGoodsList,function(index,obj){
				//console.log(a,b)
				str+="<tr>";
				str+="<td>"+obj.gid+"</td>";
				str+="<td>"+obj.gname+"</td>";
				str+="<td>"+obj.gtype+"</td>";
				str+="<td><img src = '"+path+"/"+obj.gimage+"' width = \"80\" height= \"50\"/></td>";
				str+="<td>"+obj.gprice+"</td>";
				str+="<td>"+obj.gkc+"</td>";
				str+="<td>"+obj.ginfo+"</td>";
				str+="<td><button onclick = \"\">加入购物车</button></td>";
				str+="</tr>";
			});
			
			
			
			str+="</table>";
			$("#content").html(str);
			
			
			$("#pIndex").html(pageIndex);
			$("#pMax").html(pageMax);
		});
	}
	
	
	
	
	//下一页的点击事件
	function nextBtn(){
		if(pageIndex >= pageMax){
			pageIndex = pageMax;
		}else{
			pageIndex++;
		}
		
		let searchName = $("#searchName").val();
		alert(searchName)
		//alert(pageIndex)
		indexLoad(searchName);
	}

</script>

</head>
<body>
	
	<div>
		<input type ="text" id = "searchName" />
		<button id= "searchBtn">搜索</button>
	</div>
	<div id = "content" style ="width:70%;background: pink;height:250px;text-align: center;margin:0 auto;">
		
	</div>
	<div style = "text-align: center">
		《<span id = "pIndex"></span>/<span id = "pMax"></span>》
		<a>首页</a>
		<a>上一页</a>
		<a href = "javascript:nextBtn()">下一页</a>
		<a>尾页</a>
	
	</div>



</body>