【Web】分页简单实现
2024-04-30 07:44:00
web分页
为什么需要分页？
一、数据方面的原因
大量查询的数据耗时比较严重。
二、增强用户使用体验需求
用户更方便的查询和展示他所需要的数据。
常见分页方式：传统分页方式和下拉式分页方式。
采用传统的分页方式，可以明确的获取数据信息，如有多少条数据，分多少页显示。
采用下拉式分页方式，一般无法获取明确的数据数量相关的信息，但是在分页操作以后，仍然可以看到之前查询的数据。
常见的分页实现方式
1. 使用subList()实现分页。
List<E> subList(int fromIndex,int toIndex)
返回列表中指定的fromIndex(包含)和 toIndex （不包括）之间的部分视图。
2. 使用SQL语句实现分页
利用数据库自带的分页语法，使用分页语句，获取分页数据（例如mysql数据库使用limit关键字，oracle中使用rownum关键字等）
Mysql
- select * from students limit0,10 从第0条开始查，一共查询10条记录。
3. 使用hibernate框架进行分页。
创建Query或者Criteria对象，查询时，设置firstResult(从第几条开始查)和maxResults(查询几条记录)属性。
|
String hql = “ from Student”; Query q = session.createQuery(hql); q.setFirstResult(0); q.setMaxResults(10); List l = q.list(); |
|
实现方式 |
优点 |
缺点 |
使用场景 |
|
subList |
简单、易用 |
效率低 |
无法按需批量获取数据 |
|
SQL语句 |
简单、直接、效率高 |
数据库兼容性差 |
不要求数据库兼容 |
|
Hibernate框架 |
面向对象，兼容性强 |
复杂查询性能低 |
兼容不同数据库 |
1. 使用sublist实现分页。
创建model层
学生对象 Student类
public class Student implements Serializable{/*** */private static final long serialVersionUID = -2448260736229612919L;//序列化idprivate int id;//学生记录的idprivate String stuName;//姓名private int age;//年龄private int gender;//性别private String address;//地址public Student(){super();}public Student(int id, String stuName, int age, int gender, String address) {super();this.id = id;this.stuName = stuName;this.age = age;this.gender = gender;this.address = address;}/** 构造函数，将查询到的Map类型的数据构造成学生对象*/public Student(Map<String,Object> map){this.id = (int)map.get("id");this.stuName = (String)map.get("stu_name");this.age = (int)map.get("age");this.gender = (int)map.get("gender");this.address = (String)map.get("address");}
}
分页对象 Pager类
public class Pager<T> implements Serializable{/*** 序列化id*/private static final long serialVersionUID = 7569566861340703188L;private int pageSize;//每页显示多少条记录private int currentPage;//当前第几页数据private int totalRecord;//一共多少条记录private List<T> dataList;//要显示的数据private int totalPage;//总页数public Pager() {super();}public Pager(int pageSize, int currentPage, int totalRecord,int totalPage,List<T> dataList) {super();this.pageSize = pageSize;this.currentPage = currentPage;this.totalRecord = totalRecord;this.totalPage = totalPage;this.dataList = dataList;}public Pager(int pageNum,int pageSize,List<T> sourceList){if(sourceList.size() ==0 ||sourceList == null){return;}//总记录条数this.totalRecord = sourceList.size();//每页显示多少条记录this.pageSize = pageSize;//获取总页数this.totalPage = this.totalRecord /this.pageSize;if(this.totalRecord % this.pageSize != 0){this.totalPage = this.totalPage +1;}//当前第几页数据if(this.totalPage < pageNum){this.currentPage = this.totalPage;}else{this.currentPage = pageNum;}//起始索引int fromIndex = this.pageSize*(this.currentPage-1);//结束索引int toIndex;if(this.pageSize * this.currentPage >this.totalRecord){toIndex = this.totalRecord;}else{toIndex = this.pageSize * this.currentPage;}this.dataList = sourceList.subList(fromIndex, toIndex);}
}
数据库工具类 JdbcUtil.java
public class JdbcUtil {//表示定义数据库的用户名private static String USERNAME;//定义数据库的密码private static String PASSWORD;//定义数据库的驱动信息private static String DRIVER;//定义访问数据库的地址private static String URL;//定义数据库的连接private Connection connection;//定义sql语句的执行对象private PreparedStatement pstmt;//定义查询返回的结果集合private ResultSet resultSet;static{loadConfig();}/*** 加载数据库配置文件，并给相关的属性赋值，配置信息写在配置文件中，方便管理*/public static void loadConfig(){//路径 WEB-INF\classes\jdbc.propertiesInputStream inStream = JdbcUtil.class.getResourceAsStream("/jdbc.properties");Properties prop = new Properties();try{prop.load(inStream);USERNAME = prop.getProperty("jdbc.username");PASSWORD = prop.getProperty("jdbc.password");DRIVER= prop.getProperty("jdbc.driver");URL = prop.getProperty("jdbc.url");}catch(Exception e){throw new RuntimeException("读取用户配置文件出错",e);}}/*** 获取数据库连接*/public Connection getConnection(){try {Class.forName(DRIVER);//注册驱动//获取连接对象connection = DriverManager.getConnection(URL,USERNAME,PASSWORD);} catch (ClassNotFoundException e) {e.printStackTrace();} catch (SQLException e) {e.printStackTrace();}return connection;}/*** 执行更新操作* sql sql语句* params 执行参数* return 执行结果*/public boolean updateByPreparedStatement(String sql,List<?> params)throws SQLException{boolean flag = false;int result = -1;//表示用户执行添加删除和修改的时候所影响数据库的行数pstmt = connection.prepareStatement(sql);int index = 1;//填充sql语句中的占位符if(params != null && !params.isEmpty()){for(int i=0;i < params.size();i++){pstmt.setObject(index ++, params.get(i));}}result = pstmt.executeUpdate();flag = result >0 ? true : false;return flag;}/*** 执行查询操作* sql sql语句* params 执行参数*/public List<Map<String, Object>> findResult(String sql,List<?> params)throws SQLException{List<Map<String, Object>> list = new ArrayList<Map<String,Object>>();int index = 1;pstmt = connection.prepareStatement(sql);/** 填充查询语句的参数*/if(params != null && !params.isEmpty()){for(int i = 0;i<params.size();i++){pstmt.setObject(index ++, params.get(i));}}resultSet = pstmt.executeQuery();/** 通过ResultSetMetaData获取一个ResultSet的列的类型和关于列的属性信息，如列名、列数等*/ResultSetMetaData metaData = resultSet.getMetaData();//获取列的数量int cols_len = metaData.getColumnCount();/** 遍历resultSet*/while(resultSet.next()){Map<String,Object> map = new HashMap<String, Object>();for(int i= 0;i<cols_len;i++){//获取列名String cols_name = metaData.getColumnName(i+1);//根据列名获取列值Object cols_value = resultSet.getObject(cols_name);if(cols_value == null){cols_value ="";}map.put(cols_name, cols_value);}list.add(map);}return list;}/*** 释放资源* */public void releaseConn(){if(resultSet != null){try {resultSet.close();} catch (SQLException e) {e.printStackTrace();}}if(pstmt != null){try {pstmt.close();} catch (SQLException e) {e.printStackTrace();}}if(connection != null){try {connection.close();} catch (SQLException e) {e.printStackTrace();}}}
}
数据库配置文件
jdbc.username=root
jdbc.password=limeng
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc\:mysql\://127.0.0.1\:3306/pager
创建Dao层，数据操作对象
接口 StudentDao.java
public interface StudentDao {/*** 根据查询条件，查询学生分页信息* @param searchModel 封装查询条件* @param pageNum 查询第几条数据* @param pageSize 显示多少数据* @return*/public Pager<Student> findStudent(Student searchModel,int pageNum,int pageSize);
}
Dao层接口实现类 SublistStudentDaoImpl.java
public class SublistStudentDaoImpl implements StudentDao{@Overridepublic Pager<Student> findStudent(Student searchModel, int pageNum,int pageSize) {/** 根据条件获取所有数据*/List<Student> allStudentList = getAllStudent(searchModel);/** 根据参数创建分页对象*/Pager<Student> pager = new Pager<Student>(pageNum,pageSize,allStudentList);return pager;}/** 获取所有数据*/private List<Student> getAllStudent(Student searchModel){List<Student> result = new ArrayList<Student>();List<Object> paramList = new ArrayList<Object>();String stuName = searchModel.getStuName();int gender = searchModel.getGender();StringBuilder sql = new StringBuilder("select * from t_student where 1=1");if(stuName != null && !stuName.equals("")){sql.append(" and stu_name like ?");paramList.add("%"+stuName+"%");}if(gender == Constant.GENDER_FEMALE || gender== Constant.GENDER_MALE){sql.append(" and gender = ?");paramList.add(gender);}JdbcUtil jdbcUtil = null;try {jdbcUtil = new JdbcUtil();jdbcUtil.getConnection();List<Map<String, Object>> mapList = jdbcUtil.findResult(sql.toString(), paramList);if(mapList != null){for(Map<String, Object> map : mapList){Student s = new Student(map);result.add(s);}}} catch (SQLException e) {throw new RuntimeException("查询所有数据异常！",e);}finally{if(jdbcUtil != null){jdbcUtil.releaseConn();}}return result;}
}
创建Service层，调用Dao层
public class SublistStudentServiceImpl implements StudentService{private StudentDao studentDao;public SublistStudentServiceImpl(){//创建service实现类时，初始化dao对象studentDao = new SublistStudentDaoImpl();}@Overridepublic Pager<Student> findStudent(Student searchModel, int pageNum,int pageSize) {Pager<Student> result = studentDao.findStudent(searchModel, pageNum, pageSize);return result;}public StudentDao getStudentDao() {return studentDao;}public void setStudentDao(StudentDao studentDao) {this.studentDao = studentDao;}
}
创建Servlet，接收参数，调用Service层
public class SublistServlet extends HttpServlet {//创建service对象private StudentService studentService = new SublistStudentServiceImpl();public SublistServlet() {super();}public void destroy() {super.destroy(); // Just puts "destroy" string in log// Put your code here}public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {/** 设置编码格式，防止解析中文参数乱码*/request.setCharacterEncoding("utf-8");/* 接收request参数* 学生姓名*/String stuName = request.getParameter("stuName");/** 性别，默认是0，表示全部，不论男女*/int gender = Constant.DEFAULT_GENDER;String genderStr = request.getParameter("gender");if(genderStr != null && !"".equals(genderStr.trim())){gender = Integer.parseInt(genderStr);// 获取学生性别}/** 当前请求第几页*/int pageNum = Constant.DEFAULT_PAGENUM;String pageNumStr = request.getParameter("pageNum");//参数校验，是否是数字if(pageNumStr != null && !StringUtil.isNum(pageNumStr)){request.setAttribute("errorMsg", "参数输入错误");request.getRequestDispatcher("sublistStudent.jsp").forward(request,response);return;}if(pageNumStr != null && !"".equals(pageNumStr.trim())){pageNum = Integer.parseInt(pageNumStr);//获取当前请求第几页}/** 每页显示多少条数据*/int pageSize = Constant.DEFAULT_PAGE_SIZE;String pageSizeStr = request.getParameter("pageSize");if(pageSizeStr != null && !"".equals(pageSizeStr.trim())){pageSize = Integer.parseInt(pageSizeStr);// 每页显示多少条记录}// 组装查询条件Student searchModel = new Student();searchModel.setStuName(stuName);searchModel.setGender(gender);// 调用service查询结果Pager<Student> result = studentService.findStudent(searchModel,pageNum, pageSize);// 返回结果到页面request.setAttribute("result", result);request.getRequestDispatcher("sublistStudent.jsp").forward(request,response);}
}
Jsp页面
<%@ 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">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>学生信息</title>
</head>
<%// 获取请求的上下文String context = request.getContextPath();
%>
<script type="text/javascript">
// 当前第几页数据
var currentPage = ${result.currentPage};
// 总页数
var totalPage = ${result.totalPage};function submitForm(actionUrl){var formElement = document.getElementById("stuForm");formElement.action = actionUrl;formElement.submit();
}// 第一页
function firstPage(){if(currentPage == 1){alert("已经是第一页数据");return false;}else{submitForm("<%=context %>/sublist/SublistServlet?pageNum=1");return true;}
}// 下一页
function nextPage(){if(currentPage == totalPage){alert("已经是最后一页数据");return false;}else{submitForm("<%=context %>/sublist/SublistServlet?pageNum=" + (currentPage+1));return true;}
}// 上一页
function previousPage(){if(currentPage == 1){alert("已经是第一页数据");return false;}else{submitForm("<%=context %>/sublist/SublistServlet?pageNum=" + (currentPage-1));return true;}
}// 尾页
function lastPage(){if(currentPage == totalPage){alert("已经是最后一页数据");return false;}else{submitForm("<%=context %>/sublist/SublistServlet?pageNum=${result.totalPage}");return true;}
}
/** 在初次加载时默认选择全部*/
function initPage(){var genderRequest = "${gender}" ;var genderVal = 0;var genderElement = document.getElementById("gender");if(genderRequest != ""){genderVal = parseInt(genderRequest);}var options = genderElement.options;var i = 0;for(i = 0; i < options.length; i++){if(options[i].value == genderVal){options[i].selected=true;break;}}
}
</script>
<body οnlοad="initPage();"><div style="margin-left: 100px; margin-top: 100px;"><div><font color="red">${errorMsg }</font></div><div><form action="<%=context %>/sublist/SublistServlet" id="stuForm" method="post">姓名<input type="text" name="stuName" id="stu_name" style="width:120px" value="${stuName }">性别<select name="gender" id="gender" style="width:80px"><option value="0">全部</option><option value="1">男</option><option value="2">女</option></select><input type="submit" value="查询"></form></div> <br>学生信息列表：<br><br><!-- 后台返回结果为空 --><c:if test="${fn:length(result.dataList) eq 0 }"><span>查询的结果不存在</span></c:if><!-- 后台返回结果不为空 --><c:if test="${fn:length(result.dataList) gt 0 }"><table border="1px" cellspacing="0px"style="border-collapse: collapse"><thead><tr height="30"><th width="130">姓名</th><th width="130">性别</th><th width="130">年龄</th><th width="190">家庭地址</th></tr></thead><c:forEach items="${result.dataList }" var="student"><tr><td><c:out value="${student.stuName}"></c:out></td><td><c:if test="${ student.gender eq 1}">男</c:if><c:if test="${ student.gender eq 2}">女</c:if></td><td><c:out value="${student.age }"></c:out></td><td><c:out value="${student.address }"></c:out></td></tr></c:forEach></table><br> 共${result.totalRecord }条记录共${result.totalPage }页 当前第${result.currentPage }页 <a href="#" οnclick="firstPage();">首页</a> <a href="#" οnclick="nextPage();">下一页</a> <a href="#" οnclick="previousPage();">上一页</a> <a href="#" οnblur="lastPage();">尾页</a> </c:if></div>
</body>
</html>
【Web】分页简单实现相关推荐
- java web几百万分页_举例详解用Java实现web分页功能的方法
举例详解用Java实现web分页功能的方法 发布于 2020-11-25| 复制链接 摘记: 分页问题是一个非常普遍的问题,开发者几乎都会遇到,这里不讨论具体如何分页,说明一下Web方式下分页的原理. ...
- html打印表格自动分页,Web分页打印 细线表格+分页打印之终极攻略
Web分页打印 细线表格+分页打印之终极攻略 发布时间:2009-03-01 23:46:40 作者:佚名 我要评论 最近给客户做打印的时候,客户提出打印时不要打印该页面的头,只是打印表格里面 ...
- 用Session和唯一索引字段实现通用Web分页功能
本文为原创,如需转载,请注明作者和出处,谢谢! Web系统虽然现在很流行,但是分页问题一直长期困扰着Web系统的开发人员.对于不同的数据库,可能开发人员对分页的处理分有很大差别.个人认为,使用MySQ ...
- Web Services简单介绍
Web Services简单介绍 Web Services入门 一.Web Services简介 1.什么是Web Services? Web Services 是应用程序组件 Web Service ...
- JQuery Datatables 服务端分页简单应用学习
背景介绍 最近在一个简单小项目中碰到需要一个前端数据表格控件,在看了网上的资料后最终选择了JQuery Datatables.Datatables功能及其强大,基本满足我的所有需求,在加上其插件Edi ...
- 语义web一些简单示例
语义web一些简单示例 示例1 (xml部分-用xml描述书籍信息) 题目:写出三本书,每本书有:标题,作者,出版社,出版日期,,,,,:写出对应的XML文件:根据你写的XML文件,写出对应的DTD文 ...
- Tez的web UI简单体验
Tez的web UI简单体验 前言 由于CDP7默认是Hive On Tez,不再有Map Reduce和Spark什么事,查看监控.分析数据倾斜等原因导致的HQL任务跑不快的问题没有使用Spark那 ...
- Web开发-简单BBS论坛
Web开发-简单BBS论坛 开发了两周的bbs论坛系统,总算在上周完成了,并且已经把项目文件上传到github上了.[我的bbs]... 开发完之后,感觉对sql语句.mysql函数和PHP代码有了深 ...
- html5移动web开发简答题,HTML5移动Web开发简单知识点介绍
原标题:HTML5移动Web开发简单知识点介绍 1 :基于HTML5的移动Web应用 Canvas绘图:通过获取HTML中的Dom元素Canvas,调用其渲染上下文的Context对象,使用Js进行图 ...
最新文章
- 安装php ssh2扩展
- HTML中属性值是否加引号规则详解
- php语句过滤掉html标签_php过滤html标签
- [Unity] ACT 战斗系统学习 2：从 Buff 系统开始的思考
- Go Slice 使用中的小陷阱
- 文件系统操作-分区及格式化、挂载
- mac下打开多个相同应用程序
- p40_数据交换方式
- 中文书籍中对《人月神话》的引用（完结，共110本）：软件工程通史1930-2019、实用Common Lisp编程……
- XDOJ 回文数 C语言
- Pytorch学习率调整策略
- 关于 PHP 的框架 phalcon 学习(一) url 路由过程。
- 关于手机端input获取焦点呼起键盘背景图片挤压解决方案
- 什么是物联网？通过例子了解物联网，物联网的层次架构，物联网的应用
- css sprites精灵技术：Html将所有图片放在一张图片上
- 聊聊RESTful - 科普篇
- linux--redis安装
- 新媒体运营：如何做好软文写作？
- 电子货架标签----可自由编程的显示界面
- office和python二级哪个更有用_ms office二级和一级区别