JavaWeb(ajax实现分页)

最新推荐文章于 2022-04-26 21:36:08 发布

微风入山林

最新推荐文章于 2022-04-26 21:36:08 发布

阅读量1.3k

点赞数

文章标签： eclipse

本文链接：https://blog.csdn.net/weixin_63823376/article/details/123808192

版权

一.实现无刷新的分页的好处

为客户提供良好的体验，取缔了等待加载页面而出现的空白状态

二.如何实现无刷新分页

1.进行封装

private int gid;
private String gname;
private int gprice;
private String ginfo;
private String gpath;

2.专门控制分页的方法

@Override
	public List<Goods> getAllByPage(int pageIndex, int pageSize) {
		List<Goods> ls=new ArrayList<Goods>();
		try {
			con=DBHelper.getCon();
			String sql="select * from(select a.*,rownum as rid from goods a) b where b.rid between ? and ?";
			int a = (pageIndex-1)*pageSize+1;
			int b = pageIndex*pageSize;
			ps=con.prepareStatement(sql);
			//给占位符赋值
			ps.setInt(1, a);
			ps.setInt(2, b);
			rs=ps.executeQuery();
			while(rs.next()) {
				Goods g=new Goods();
				g.setGid(rs.getInt(1));
				g.setGname(rs.getString(2));
				g.setGprice(rs.getInt(3));
				g.setGinfo(rs.getString(4));
				g.setGpath(rs.getString(5));
				ls.add(g);//不要忘记了
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.myClose(con, ps, rs);
		}
		return ls;
	}

3.获取总行数

@Override
	public int getRows(String str) {
		int n = 0;
		try {
			con=DBHelper.getCon();
			String sql="select count(*) from "+str;
			ps=con.prepareStatement(sql);
			rs=ps.executeQuery();
			if(rs.next()) {
				n=rs.getInt(1);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.myClose(con, ps, rs);
		}
		return n;
	}

4.在业务逻辑层封装一个最大值的方法

@Override
	public int getMax(String str, int pageSize) {
		int rows = igd.getRows(str);//拿到总行数
		int max = rows/pageSize;//求页码
		if(rows%pageSize!=0) {//判断是否能够除得尽
			max++;
		}
		return max;
	}

5.创建PageServlet

//设置编码方式
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html; charset=UTF-8");
		//获取out
		PrintWriter out = resp.getWriter();
		
		int pageIndex=1;
		int pageSize=5;
		//接收pid
		String pid = req.getParameter("pid");
		if(pid!=null) {
			pageIndex=Integer.parseInt(pid);
		}
		//调用biz层的分页方法
		IGoodsBiz igb = new GoodsBiz();
		//商品集合
		List<Goods> ls = igb.getAllByPage(pageIndex, pageSize);
		//获得最大页码
		int max = igb.getMax("goods", pageSize);
		//把集合转为String
		String str = JSON.toJSONString(ls);
		//把响应输送到客户端
		out.print(str+"*"+max);//特殊字符做拼接
		out.flush();
		out.close();

6.主页面

<%@ 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>Insert title here</title>
<!-- 引入jQuery类库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!-- 另起一个script -->
<script type="text/javascript">
	$(function() {
		//默认显示第一页
		myf('a');
	})
	//扩大作用域
	var pageIndex;
	var max;
	//写一个方法专门控制分页
	function myf(type) {
		if(type=='a'){
			pageIndex=1;//首页
		}
		else if(type=='b'){//上一页
			if(pageIndex>1){
				pageIndex--;
			}
			else{
				alert("已经是第一页了嘞");
			}
		}
		else if(type=='c'){//下一页
			if(pageIndex<max){
				pageIndex++;
			}
			else{
				alert("已经是最后一页了嘞");
			}
		}
		else{//末页
			pageIndex=max;
		}
		//ajax
		$.post("page.do",{pid:pageIndex},function(data){
			//用*分割
			var x=data.split("*");
			//x[0]代表json格式的对象数组字符串
			//x[1]代表max值 
			//将json格式的对象数组字符串-->js的对象数组
			var ss=$.parseJSON(x[0]);
			//给max赋值
			max=parseInt(x[1]);
			var sb="<table border=\"1px\"><tr align='center'><td>商品序号</td><td>商品名称</td><td>商品图片</td></tr>";
			//循环遍历
			$.each(ss, function(i, g) {//下标，元素=对象
				sb+="<tr align='center'>";
				sb+="<td>"+g.gid+"</td>";
				sb+="<td>"+g.gname+"</td>";
				sb+="<td><img src='"+g.gpath+"'/></td>";
				sb+="</tr>";
			})
			sb+="</table>";
			sb+="["+pageIndex+"/"+max+"]";
			//给div赋值
			$("#aa").html(sb);
		})
	}
</script>
</head>
<body>
	<center>
		<img src="images/17.jpg">
		<input>
		<div id="aa"></div>
		<div>
			<a href="javascript:myf('a')">首页</a>&nbsp;
			<a href="javascript:myf('b')">上一页</a>&nbsp;
			<a href="javascript:myf('c')">下一页</a>&nbsp;
			<a href="javascript:myf('d')">末页</a>&nbsp;
		</div>
	</center>
</body>
</html>

微风入山林

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb(ajax实现分页)

一.实现无刷新的分页的好处为客户提供良好的体验，取缔了等待加载页面而出现的空白状态二.如何实现无刷新分页1.进行封装private int gid;private String gname;private int gprice;private String ginfo;private String gpath;2.专门控制分页的方法@Override public List<Goods> getAllByPage(int pageIndex, int
复制链接

扫一扫