jQueryAjax案例：如何实现分页

最新推荐文章于 2023-04-17 11:28:30 发布

太阳以西.S

最新推荐文章于 2023-04-17 11:28:30 发布

阅读量1k

点赞数 2

本文链接：https://blog.csdn.net/whalesharks/article/details/108959091

版权

文章目录

涉及到的技术点

前端使用bootstrap的分页组件来完成数据的分页显示；
服务器端使用javaee经典三层架构；
使用C3P0连接池，dbutils来完成数据库操作。

分页的种类

物理分页：使用数据库本身的分页操作来完成数据查询，查询到的就是当前页的信息。例如mysql可以使用limit，oracle数据库可以使用rownum来完成。优点是性能好，但是存在不通用的问题。
逻辑分页：利用数据库的游标来操作，性能低但是通用。
现在开发中常用物理分页。

分页原理

在这里插入图片描述

sql语句：select * from table limit(页码-1) ×每页条数，(每页条数)；
完成分页操作必备条件：
- 页码pageNo默认是1，会根据上一页、下一页、首页、尾页的选择变化，通过js来控制；
- 每页显示条数人为控制；
- 总条数；
- 总条数=总条数/每页显示条数（要取整）；
- 封装的当前页的数据。

javaee三层架构

在这里插入图片描述

代码思路

前期准备
- 工程的目录结构
- 配置文件、工具类、jar包导入
完成查询所有列表操作
- 创建查询页面，向服务器发送请求（获取要查询的信息）。
- 创建servlet接收浏览器请求，获取产品信息（web包下创建）。
- 创建业务层service。
- 创建持久化层dao。dao层进行数据库查询-----service----servlet
- servlet将list结果转换成json响应到浏览器。
- 浏览器页面ajax操作，遍历数据写入表格。
分页操作
- 在浏览器端设置pageNo和pageSize，将他们作为参数传递到服务器端。
- 服务器处理分页：
  - 在分页条中需要总页数据，也就是说，总页数我们需要在服务器端查询获得到。可以定义一个pageBean对象，在pageBean中封装分页需要的数据，将他在服务器端生成。服务器端就不需要直接返回list集合，而是返回一个pageBean的json数据。
在浏览器端展示分页信息
- 判断处理当前页高亮显示
- 点击页码，可以跳转到指定页
- 在真正生成分页数据前将数据清空
- 处理请求参数pageNo
- 实现上一页、下一页功能

实现代码

html页面操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="/web08/bootstrap/css/bootstrap.min.css">
		<script src="/web08/jquery/jquery-1.11.3.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="/web08/bootstrap/js/bootstrap.min.js"></script>
		<script>
		var pageNo = 1; //默认第一页
		var pageSize = 5;  //每页显示条数
		var totalPage = 0;
		var totalCount = 0;
		<!-- 页面加载完成后，要向服务器发送请求，来获取产品信息，在table中显示出来 -->
		$(function(){
			skipPage(pageNo);
		});
			//处理跳转页面
		function skipPage(pageNum){
			pageNo = pageNum;
			var url = "/web08/score";
			$.post(url,{"pageNo":pageNo,"pageSize":pageSize},function(data){
				var json = eval(data);
				var jsonObj = json.content;//得到分页数据
				//将页码 每页条数 总条数 总页数与服务器响应的数据同步
				totalPage = json.totalPage;
				totalCount = json.totalCount;
				//将json数据遍历，转换成html代码插入tab
				var html=" ";
				
			for (var i = 0; i < jsonObj.length; i++) {
						html += "<tr><td>" + jsonObj[i].id + "</td><td>"
								+ jsonObj[i].stu_id + "</td><td>"
								+ jsonObj[i].c_name + "</td><td>"
								+ jsonObj[i].greade + "</td></tr>";
					}
			//展示分页条数据
			var pageMsg="<ul class='pagination'>";
			//实现上一页功能
			if(pageNo == 1){
				pageMsg += "<li class='disabled'><a href='#'>&laquo;</a></li>";
			}else{
				pageMsg += "<li><a href='javascript:viod(0)' οnclick='skipPage("+(pageNo-1)+")'>&laquo;</a></li>";
			}
			for(var i = 0; i < totalPage; i++){
				//判断页码与（i+1）是否一致，一致就代表当前页码要高亮显示
				if((i+1) == pageNo){
					pageMsg += "<li class='active'><a href='jacascript:void(0)'>"+(i+1)+"</a></li>";
				}else{
					pageMsg += "<li><a href='jacascript:void(0)' οnclick='skipPage("+(i+1)+")'>"+(i+1)+"</a></li>";	
				}
	
			}
			//实现下一页功能
			if(pageNo == totalPage){
				pageMsg += "<li class='disabled'><a href='#'>&raquo;</a></li>";
			}else{
				pageMsg += "<li><a href='javascript:viod(0)' οnclick='skipPage("+(pageNo+1)+")'>&raquo;</a></li>";
			}
			pageMsg += "</ul>";
					
			//清空页面数据，避免重复显示
			$("#tab").html("<tr><td>序号</td><td>学号</td><td>科目</td><td>成绩</td></tr><tr><td colspan='4'><nav id='n'></nav></td></tr>");
			$("#n").append(pageMsg);
			$("#tab tr:nth-child(1)").after(html);
		
				},"json");
		}	
		</script>
	</head>
	<body>
	<div class="container">
		<table class="table table-striped" id="tab">
			<tr>
				<td>序号</td>
				<td>学号</td>
				<td>科目</td>
				<td>成绩</td>
			</tr>
			<tr>
				<td colspan="4"><nav id="n"></nav></td>	
			</tr>		
		</table>		
	</div>
	</body>
</html>

servlet层操作

public class ScoreServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//处理响应数据中文乱码
		response.setCharacterEncoding("utf-8");
		//接收请求参数pageNo、pageSize
		int pageNo = Integer.parseInt(request.getParameter("pageNo")); //页码
		int pageSize = Integer.parseInt(request.getParameter("pageSize"));//每页显示条数
		
		
		try {
			//查询所有产品
			ScoreService scoreService = new ScoreService();
			PageBean<Score> pageBean = scoreService.selectAll(pageNo,pageSize);
			//将pageBean转换成json响应到浏览器
			String json = JSONObject.toJSONString(pageBean);
			response.getWriter().write(json);
			
		} catch (SQLException e) {
			e.printStackTrace();
			//向浏览器发送一条描述错误信息的json数据
		}
		
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

service层操作

public class ScoreService {
//	public List<Score> selectAll(int pageNo,int pageSize) throws SQLException{
//		ScoreDao scoreDao = new ScoreDao();
//		
//		return scoreDao.selectAll(pageNo,pageSize);
//	}
	//使用pageBean来处理分页数据
	public PageBean<Score> selectAll(int pageNo,int pageSize) throws SQLException{
		ScoreDao scoreDao = new ScoreDao();
		List<Score> list = scoreDao.selectAll(pageNo,pageSize);
		
		PageBean<Score> pageBean = new PageBean<Score>();
		//将分页数据封装到PageBean中
		pageBean.setContent(list);
		pageBean.setPageNo(pageNo);
		pageBean.setPageSize(pageSize);
		//总条数通过selece count（*） from table查询
		int totalCount = scoreDao.selectCount();
		pageBean.setTotalCount(totalCount);
		//System.out.println(totalCount);
		int totalPage = (int) Math.ceil(totalCount*1.0/pageSize);//向上取整
		//System.out.println(totalPage);
		pageBean.setTotalPage(totalPage);
		
		return pageBean;
	}

}

dao层操作

public class ScoreDao {
	QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
	
	public List<Score> selectAll(int pageNo, int pageSize) throws SQLException {
		List<Score> lsit = queryRunner.query("select * from score limit ?,?", new BeanListHandler<Score>(Score.class),
				(pageNo - 1) * pageSize, pageSize);

		return lsit;
	}
	
//查询总条数
	public int selectCount() throws SQLException {
		Long l = (Long)queryRunner.query("select count(*) from score", new ScalarHandler());		
		return l.intValue();
	}
 
}

bean类的代码

public class PageBean<T> {
	private int pageNo; //页码
	private int pageSize; //每页显示条数
	private int totalPage; //总页数
	private int totalCount;//总条数
	private List<T> content;//当前页显示的数据
	public int getPageNo() {
		return pageNo;
	}
	public void setPageNo(int pageNo) {
		this.pageNo = pageNo;
	}
	public int getPageSize() {
		return pageSize;
	}
	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}
	public int getTotalPage() {
		return totalPage;
	}
	public void setTotalPage(int totalPage) {
		this.totalPage = totalPage;
	}
	public int getTotalCount() {
		return totalCount;
	}
	public void setTotalCount(int totalCount) {
		this.totalCount = totalCount;
	}
	public List<T> getContent() {
		return content;
	}
	public void setContent(List<T> content) {
		this.content = content;
	}
}

目录结构

在这里插入图片描述

实现效果

在这里插入图片描述

太阳以西.S

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
jQueryAjax案例：如何实现分页

文章目录涉及到的技术点分页的种类分页原理javaee三层架构代码思路实现代码目录结构实现效果涉及到的技术点前端使用bootstrap的分页组件来完成数据的分页显示；服务器端使用javaee经典三层架构；使用C3P0连接池，dbutils来完成数据库操作。分页的种类物理分页：使用数据库本身的分页操作来完成数据查询，查询到的就是当前页的信息。例如mysql可以使用limit，oracle数据库可以使用rownum来完成。优点是性能好，但是存在不通用的问题。逻辑分页：利用数据库的游标来操作，性
复制链接

扫一扫