jQueryAjax案例：如何实现分页

科技2025-04-04 14

文章目录

涉及到的技术点分页的种类分页原理javaee三层架构代码思路实现代码目录结构实现效果

涉及到的技术点

前端使用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----servletservlet将list结果转换成json响应到浏览器。浏览器页面ajax操作，遍历数据写入表格。

分页操作

在浏览器端设置pageNo和pageSize，将他们作为参数传递到服务器端。服务器处理分页：在分页条中需要总页数据，也就是说，总页数我们需要在服务器端查询获得到。可以定义一个pageBean对象，在pageBean中封装分页需要的数据，将他在服务器端生成。服务器端就不需要直接返回list集合，而是返回一个pageBean的json数据。

在浏览器端展示分页信息

判断处理当前页高亮显示点击页码，可以跳转到指定页在真正生成分页数据前将数据清空处理请求参数pageNo实现上一页、下一页功能

实现代码

html页面操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>  <link rel="stylesheet" href="/web08/bootstrap/css/bootstrap.min.css"> <script src="/web08/jquery/jquery-1.11.3.js"></script>  <script src="/web08/bootstrap/js/bootstrap.min.js"></script> <script> var pageNo = 1; //默认第一页 var pageSize = 5; //每页显示条数 var totalPage = 0; var totalCount = 0;  $(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='#'>«</a></li>"; }else{ pageMsg += "<li><a href='javascript:viod(0)' οnclick='skipPage("+(pageNo-1)+")'>«</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='#'>»</a></li>"; }else{ pageMsg += "<li><a href='javascript:viod(0)' οnclick='skipPage("+(pageNo+1)+")'>»</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; } }

目录结构

实现效果

Processed: 0.009, SQL: 8