AJAX分页

目录

封装dao方法 

分页sql语句定义oracle 语句dao方法

Servlet类获取数据代码

Html界面代码 显示与搜索实现

jsp界面编写

---

封装dao方法 

/**
	 * 通用的曾删改
	 * 
	 * @param sql
	 * @param objct
	 * @return
	 */
	public int executeUpdate(String sql, Object... objct) {
	
		int  n=0;
		 conn=DBHelper.getConn();
		 try {
			ps=conn.prepareStatement(sql);
			for (int i = 0; i < objct.length; i++) {
				ps.setObject(i+1, objct[i]);
			}
			n=ps.executeUpdate();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			DBHelper.myclose(conn, ps, rs);
		}
		
		
		return n;
	}
	/**
	 * 通用查询方法
	 * @param sql 
	 * @param objct
	 * @return
	 */
	public ResultSet executeQuery(String sql, Object... objct) {
		
		
		 conn=DBHelper.getConn();
		 
		 try {
			ps=conn.prepareStatement(sql);
			for (int i = 0; i < objct.length; i++) {
				ps.setObject(i+1, objct[i]);
			}
			rs=ps.executeQuery();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		return rs;
	}

分页sql语句定义oracle 语句dao方法

@Override
	public List<Goods> getGoodsAll(Integer pagMax, Integer pagindex, String strName, Object... objects) {
		Integer pagcount = 4;// 默认每页显示4条
		if (objects.length != 0) {
			try {// 如果传入字符串 报错 直接改为默认4条
				pagcount = (Integer) objects[0];
 
			} catch (Exception e) {
				pagcount = 4;
			}
		}
		Integer Maxindex = pagMax % pagcount == 0 ? pagMax / pagcount : pagMax / pagcount + 1;
		// 判断如果分页 页数大于了总分页条数 直接返回 不进数据库
		if (pagindex > Maxindex) {
			return null;
 
		}
		Integer start = (pagindex - 1) * pagcount + 1;
		Integer end = pagcount * pagindex;
		String sql = "select gid,gname,gtype,gimage,gprice,gkc,ginfo from \r\n"
				+ "(select a.gid,a.gname,a.gtype,a.gimage,a.gprice,a.gkc,a.ginfo,rownum as rid from \r\n"
				+ "(select gid,gname,gtype,gimage,gprice,gkc,ginfo from tb_goods where gname like '%" + strName
				+ "%' or ginfo like '%" + strName + "%')a\r\n" + " )b where b.rid between " + start + " and " + end
				+ "";
		ResultSet rs = this.executeQuery(sql);
		List<Goods> list = new ArrayList<Goods>();
		try {
			while (rs.next()) {
				list.add(new Goods(rs.getInt(1), rs.getString(2), rs.getString(3), rs.getString(4), rs.getInt(5),
						rs.getInt(6), rs.getString(7)));
			}
 
		} catch (Exception e) {
			e.printStackTrace();
			// TODO: handle exception
		} finally {
      //数据库 工具类
			DBHelper.myclose(conn, ps, rs);
		}
		return list;
	}

Servlet类获取数据代码

分页与提示共用界面 以及加载主页数据

package com.zking.cart.servlet;
 
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.cart.bzi.ICartBiz;
import com.zking.cart.bzi.IGoodsBiz;
import com.zking.cart.bzi.impl.CartBizImpl;
import com.zking.cart.bzi.impl.GoodsBizImpl;
import com.zking.cart.bzi.impl.UserBizImpl;
import com.zking.cart.entity.Cart;
import com.zking.cart.entity.Goods;
import com.zking.cart.entity.Users;
 
/**
 * Servlet implementation class GoodsList
 */
@WebServlet("/GoodsList.do")
public class GoodsList extends HttpServlet {
	private static final long serialVersionUID = 1L;
 
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}
 
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		 ICartBiz cart=new CartBizImpl();
		
		String parameter = request.getParameter("zt");
		
			IGoodsBiz goods=new GoodsBizImpl();
			
			//上方提示框制作 提示框  需要用到包含分类   商品名 与介绍 进行排分  提示框 后面跟着名字或者介绍
			String str=request.getParameter("strname1");
			if(str!=null) {
				List<Goods> goosdao =null;
				 goosdao = goods.getvagueGoods(str);
//				System.out.println(goosdao.size());
				 
				 //计算搜索框条数
				 Integer index=0;
				 for (Goods goods2 : goosdao) {
					if(goods2.getGname().contains(str)) {
						index+=1;
					}
					if(goods2.getGinfo().contains(str)) {
						index+=1;
					}
					
				}
				 Map< String , Object> map=new HashMap<String, Object>();
				 map.put("goodslist", goosdao);
				 map.put("index", index);
				//json 转换对象
				ObjectMapper oMapper=new ObjectMapper();
				
				String writeValueAsString = oMapper.writeValueAsString(map);
				//返回给客户端
				PrintWriter out = response.getWriter();
				out.write(writeValueAsString);
				out.flush();
				out.close();
				
				//如果运行的是提示搜索 则后面代码不运行
				return;
			}else {
			//获取当前页数
			String indexs=request.getParameter("index");
			Integer index=1;
			if(indexs!=null) {
				index=Integer.parseInt(indexs);
			}
			//获取模糊查询字段
			String strName=request.getParameter("strName");
			if(strName==null) {
				strName="";
			}
			List<Goods> getvagueGoods = goods.getvagueGoods(strName);
			//计算最大页数
			Integer pagSum=4;
			//Integer pagMax=getvagueGoods.size()%pagSum==0?getvagueGoods.size()/pagSum:getvagueGoods.size()/pagSum+1;
			List<Goods> goodsAll = goods.getGoodsAll(getvagueGoods.size(), index, strName,pagSum);
			//创建map集合保存 数据
			Map<String, Object> map=new HashMap<String, Object>();
			map.put("pagSum", pagSum);
			map.put("pagMax", getvagueGoods.size());
			map.put("goodsAll",goodsAll);
			map.put("index",index);
			//json 转换对象
			ObjectMapper oMapper=new ObjectMapper();
			String writeValueAsString = oMapper.writeValueAsString(map);
			//返回给客户端
			PrintWriter out = response.getWriter();
			out.write(writeValueAsString);
			out.flush();
			out.close();
			
			}
	}
 
}

Html界面代码 显示与搜索实现

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<style type="text/css">
  
</style>
<%@ include file="indexTop.jsp" %>
 
 <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
   
    <script src="js/jqPaginator.min.js" type="text/javascript"></script>
    <link href="css/myPage.css" rel="stylesheet" type="text/css" /> 
 
</head>
<body>
<script type="text/javascript">
window.sessionStorage.setItem("ztindex",0 );
</script>
<!-- 引入头部标签 -->
<%-- <c:if test="${empty requestScope.goodslist }">
<jsp:forward page="GoodsList.do"></jsp:forward>
</c:if> --%>
 
 
<script type="text/javascript">
//定义模糊查询的关键字 全局变量
let strName="";
//项目绝对地址
let path="${pageContext.request.servletContext.contextPath}";
$(function () {
	paging(1,"");
	//默认隐藏
	$("#tsDiv").hide();
	//判断有多少条数据
	let count =0;
	//模糊查询！
	//键盘按下事件
   
	$("#subut").prev().keyup(function () {		
	
     let strname= $("#subut").prev().val()//获取搜索框中的值
	  
	//字符串取反 表示字符串为空的时候 返回true 有值则返回false |去掉取反符号 正好相反
	 if(!strname){
		 strName="";
		 paging(1,"");
		 $("#tsDiv").slideUp();
		 $("#tsDiv").html("")
		 return;
		 
	 }
	 
		$.post(path+"/GoodsList.do","strname1="+strname, function (mag) {
			let list=$.parseJSON(mag);
						
			if(list.index>=11){
				$("#tsDiv").css("height","300px");
			}else{
				
				$("#tsDiv").css("height",(20*list.index)+"px");
			}
			console.log(list.goodslist.length)
			//在搜索时没有数据隐藏
			 if(list.goodslist.length==0){
				 $("#tsDiv").slideUp();
			}else{
				 $("#tsDiv").slideDown(200);
			}
			let strs="";
			
			$.each(list.goodslist,function (index,val) {
				//使用包含 js中的包含
				//商品名包含
				if(val.gname.includes(strname)){
					let gname=val.gname;
				 	if(gname>=12){
				 		  gname=gname.substring(0, 12)+"...";
					} 
					
					
					strs+="<div onclick='clickts(this)' name='"+val.gname+"'><span>"+val.gname+"</span><label >商品名</label></div>";
					
				} 
				//商品介绍 14
				 if(val.ginfo.includes(strname)){
					  let ginfo=val.ginfo;
					  if(ginfo.length>=12){
						  
					  ginfo=ginfo.substring(0, 12)+"...";
					  }
					  
					 strs+="<div onclick='clickts(this)' name='"+val.ginfo+"'><span>"+ginfo+"</span><label >商品介绍</label></div>";
					
				} 
			})
			
			
		$("#tsDiv").html(strs);
		 
	})
	
	})
$("#subut").prev().blur(function() {
	
	 $("#tsDiv").slideUp(400);
	 
})
	
$("#subut").prev().focus(function() {
	let strname1= $("#tsDiv").html();
	
	if(strname1.trim()){
		
	 $("#tsDiv").slideDown();
	}
	 
})	
 
})
 
//编写无刷新分页的代码  ajax
function paging(index,strName,indexs) {
	
	$.ajax({
		url:path+"/GoodsList.do",
		type:"post",
		async:"true",
		data: {"index":index,"strName":strName},
		success:function(data){
			let obj= $.parseJSON(data);
			//获取的最大页数
			let pagMax=obj.pagMax;
			
			$("#PageCount").val(pagMax);
			//此方法刷新页数 还有 设置页码
			console.log(pagMax)
			loadpage(parseInt(obj.index)); //重新计算页数方法
			//获取的每页页数
			let pagSum=obj.pagSum;
			//获取的数据 数组
			let goodslist=obj.goodsAll;
			 //保存拼接之后的标签
			let str="";
			$.each(goodslist,function (index,val) {
				str+="<tr class='odd'>";
				str+="<td><input type='checkbox' name='bookId' value='"+val.cid+"'/></td>";
				str+="<td class='title'>"+val.gname+"</td>";
				str+="<td>￥"+val.gprice+"</td>";
				str+="<td>"+val.gkc+"</td>";
				str+="<td class='thumb'><img style='width: 100px; height: 80px' src='"+val.gimage+"' /></td></tr>";
			})
			 //清空上一页数据！！
			   for(var i=1;i<=parseInt(pagSum);i++){
				   //删除上一页的数据
				   $("#tablexs tr").eq(1).remove();
				 }
			$("#tablexs").append($(str));  
			
		}
		
	})
}
//搜索按钮事件
function clicksu(obj) {
 strName=$(obj).prev().val(); //获取模糊搜索框中的值
paging(1,strName);
}
 
 
//提示框点击按钮事件
 
function clickts(obj) {
	 strName=$(obj).attr("name");
	
    $("#subut").prev().val(strName);
	paging(1,strName);
	
}
 
/**
 * 分页实现 下方样式！！！！！！！！！！！！！！！！
 */
 
 function loadData(num) {
		
		if(num!=0){
			
		paging(num,strName);
		
		}
}
 
</script>
  
<div id="content" class="wrap">
	<div class="list bookList">
		<form method="post" name="shoping" action="${not empty users?'GoodsList.do':'javascript:index()'}">
		    <input type="hidden" value="1" name="zt">
			<table id="tablexs">
				<tr class="title">
					<th class="checker"></th>
					<th>商品名</th>
					<th class="price">价格</th>
					<th class="store">库存</th>
					<th class="view">图片预览</th>
				</tr>
				
				<%-- <c:if test="${not empty requestScope.goodslist }">
				<c:forEach items="${requestScope.goodslist }" var="goods">
				<tr class="odd">
					<td><input type="checkbox" name="bookId" value="${goods.cid }" /></td>
					<td class="title">${goods.gname }</td>
					<td>￥${goods.gprice }</td>
					<td>${goods.gkc }</td>
					<td class="thumb"><img style="width: 100px; height: 80px"  src="${goods.gimage }" /></td>
				</tr>
				</c:forEach>
				</c:if> --%>
			</table>
			<div class="page-spliter">
						
			 <div>
    </div>
    <div>
    	
        <ul class="pagination" id="pagination">
        </ul>
        <input type="hidden" id="PageCount" runat="server" value="1"/>
        <input type="hidden" id="PageSize" runat="server" value="4" />
        <input type="hidden" id="countindex" runat="server" value="10"/>
        <!--设置最多显示的页码数 可以手动设置 默认为7-->
        <input type="hidden" id="visiblePages" runat="server" value="4" />
    </div>
    <script src="js/myPage.js" type="text/javascript"></script>
								
			</div>
			<div class="button"><input class="input-btn" type="submit" name="submit" value="" /></div>
		</form>
	</div>
</div>
<div id="footer" class="wrap">卓京信息网上书城 &copy; 版权所有</div>
</body>
<script type="text/javascript">
function index() {
	alert("请你登录后在进行操作！！")
	location.href="login.jsp";
} 
 
</script>
</html>

jsp界面编写

<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 导入jQuery类库 -->
<script type="text/javascript" src = "js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	//获取项目路径
	let path = "${pageContext.request.servletContext.contextPath}";

	let pageIndex = 1;//控制前端的下一页或者上一页 点击之后 的页码
	let pageMax = 0;//最大页码  扩大作用域
	
	
	$(function(){
		
		//直接可以调用post方法
		myload("");
		
	});
	//封装一个函数    来存储post请求的结果
	function myload(searchName){
		alert(searchName)
		$.post(path+"/adminGoodsList.do",{"pageIndex":pageIndex,"searchName":searchName},function(data){
			//console.log(data);
			//$("#content").html(data);
			//先转义成array
			let list = $.parseJSON(data);
			pageMax = list.pageMax;
			//console.log($.type(list));
			//遍历
			let str = "<table border = '1' 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>";
			
			$.each(list.adminListGoods,function(index,object){
				//console.log(index,object.gname);
				str+="<tr>";
				str+="<td>"+object.gid+"</td>";
				str+="<td>"+object.gname+"</td>";
				str+="<td>"+object.gtype+"</td>";
				str+="<td><img src = '"+object.gimage+"' width = '80' height = '60' /></td>";
				str+="<td>"+object.gprice+"</td>";
				str+="<td>"+object.gkc+"</td>";
				str+="<td>"+object.ginfo+"</td>";
				str+="<td><button>删除</button><button>修改</button></td>";
				str+="</tr>";
			});
			str+="</table>";
			
			//统一将str追加到content中
			$("#content").html(str);
			$("#pIndex").html(pageIndex);
			$("#pMax").html(pageMax);
		});
	}
	
	function nextPage(){
		
		let searchName = $("#searchName").val();
		
		if(pageIndex >= pageMax){
			pageIndex = pageMax;
			return;
		}else{
			pageIndex++;
		}
		//alert(pageIndex);
		myload(searchName);
	}
	
	/*
		搜索的点击事件
	*/
	function searchBtn(){
		pageIndex = 1;
		let searchName = $("#searchName").val();
		alert(searchName)
		if(!searchName){
			alert("请输入关键词在搜索");
			//return;
		}
		//调用
		myload(searchName);
	}
	
</script>
</head>
<body>
	<div style = "margin-bottom:10px;">
		<input id = "searchName" type = "text"/>
		<button onclick = "searchBtn()">搜索</button>
	</div>
	<div id = "content">
		
	</div>
	<!-- 分页控件 -->
	<div id = "pagination">
		《<span id = "pIndex"></span>/<span id = "pMax"></span>》
		<a href = "#">首页</a>
		<a href = "#">上一页</a>
		<a href = "javascript:nextPage();">下一页</a>
		<a href = "#">尾页</a>
	</div>
<hr/>
<%= new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()) %>
	
</body>
</html>