【Web】分页简单实现

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类

[java]  view plain  copy

1. public class Student implements Serializable{  
2.       
3.     /** 
4.      *  
5.      */  
6.     private static final long serialVersionUID = -2448260736229612919L;//序列化id  
7.     private int id;//学生记录的id  
8.     private String stuName;//姓名  
9.     private int age;//年龄  
10.     private int gender;//性别  
11.     private String address;//地址  
12.     public Student(){  
13.         super();  
14.     }  
15.     public Student(int id, String stuName, int age, int gender, String address) {  
16.         super();  
17.         this.id = id;  
18.         this.stuName = stuName;  
19.         this.age = age;  
20.         this.gender = gender;  
21.         this.address = address;  
22.     }  
23.     /* 
24.      * 构造函数，将查询到的Map类型的数据构造成学生对象 
25.      */  
26.     public Student(Map<String,Object> map){  
27.         this.id = (int)map.get("id");  
28.         this.stuName = (String)map.get("stu_name");  
29.         this.age = (int)map.get("age");  
30.         this.gender = (int)map.get("gender");  
31.         this.address = (String)map.get("address");  
32.     }  
33. }  

分页对象 Pager类

[java]  view plain  copy

1. public class Pager<T> implements Serializable{  
2.     /** 
3.      * 序列化id 
4.      */  
5.     private static final long serialVersionUID = 7569566861340703188L;  
6.     private int pageSize;//每页显示多少条记录  
7.     private int currentPage;//当前第几页数据  
8.     private int totalRecord;//一共多少条记录  
9.     private List<T> dataList;//要显示的数据  
10.     private int totalPage;//总页数  
11.     public Pager() {  
12.         super();  
13.     }  
14.     public Pager(int pageSize, int currentPage, int totalRecord,  
15.             int totalPage,List<T> dataList) {  
16.         super();  
17.         this.pageSize = pageSize;  
18.         this.currentPage = currentPage;  
19.         this.totalRecord = totalRecord;  
20.         this.totalPage = totalPage;  
21.         this.dataList = dataList;  
22.     }  
23.     public Pager(int pageNum,int pageSize,List<T> sourceList){  
24.         if(sourceList.size() ==0 ||sourceList == null){  
25.             return;  
26.         }  
27.         //总记录条数  
28.         this.totalRecord = sourceList.size();  
29.         //每页显示多少条记录  
30.         this.pageSize = pageSize;  
31.         //获取总页数  
32.         this.totalPage = this.totalRecord /this.pageSize;  
33.         if(this.totalRecord % this.pageSize != 0){  
34.             this.totalPage = this.totalPage +1;  
35.         }  
36.         //当前第几页数据  
37.         if(this.totalPage < pageNum){  
38.             this.currentPage = this.totalPage;  
39.         }else{  
40.             this.currentPage = pageNum;  
41.         }  
42.           
43.         //起始索引  
44.         int fromIndex = this.pageSize*(this.currentPage-1);  
45.         //结束索引  
46.         int toIndex;  
47.         if(this.pageSize * this.currentPage >this.totalRecord){  
48.             toIndex = this.totalRecord;  
49.         }else{  
50.             toIndex = this.pageSize * this.currentPage;  
51.         }  
52.         this.dataList = sourceList.subList(fromIndex, toIndex);  
53.     }  
54. }  

数据库工具类 JdbcUtil.java

[java]  view plain  copy

1. public class JdbcUtil {  
2.     //表示定义数据库的用户名  
3.     private static String USERNAME;  
4.     //定义数据库的密码  
5.     private static String PASSWORD;  
6.     //定义数据库的驱动信息  
7.     private static String DRIVER;  
8.     //定义访问数据库的地址  
9.     private static String URL;  
10.     //定义数据库的连接  
11.     private Connection connection;  
12.     //定义sql语句的执行对象  
13.     private PreparedStatement pstmt;  
14.     //定义查询返回的结果集合  
15.     private ResultSet resultSet;  
16.     static{  
17.         loadConfig();  
18.     }  
19.     /** 
20.      * 加载数据库配置文件，并给相关的属性赋值，配置信息写在配置文件中，方便管理 
21.      */  
22.     public static void loadConfig(){  
23.         //路径 WEB-INF\classes\jdbc.properties  
24.         InputStream inStream = JdbcUtil.class.getResourceAsStream("/jdbc.properties");  
25.         Properties prop = new Properties();  
26.         try{  
27.             prop.load(inStream);  
28.             USERNAME = prop.getProperty("jdbc.username");  
29.             PASSWORD = prop.getProperty("jdbc.password");  
30.             DRIVER= prop.getProperty("jdbc.driver");  
31.             URL = prop.getProperty("jdbc.url");  
32.         }catch(Exception e){  
33.             throw new RuntimeException("读取用户配置文件出错",e);  
34.         }  
35.     }  
36.     /** 
37.      * 获取数据库连接 
38.      */  
39.     public Connection getConnection(){  
40.         try {  
41.             Class.forName(DRIVER);//注册驱动  
42.             //获取连接对象  
43.             connection = DriverManager.getConnection(URL,USERNAME,PASSWORD);  
44.         } catch (ClassNotFoundException e) {  
45.             e.printStackTrace();  
46.         } catch (SQLException e) {  
47.             e.printStackTrace();  
48.         }  
49.         return connection;  
50.     }  
51.       
52.     /** 
53.      * 执行更新操作 
54.      * sql sql语句 
55.      * params 执行参数 
56.      * return 执行结果 
57.      */  
58.     public boolean updateByPreparedStatement(String sql,List<?> params)throws SQLException{  
59.         boolean flag = false;  
60.         int result = -1;//表示用户执行添加删除和修改的时候所影响数据库的行数  
61.         pstmt = connection.prepareStatement(sql);  
62.         int index = 1;  
63.         //填充sql语句中的占位符  
64.         if(params != null && !params.isEmpty()){  
65.             for(int i=0;i < params.size();i++){  
66.                 pstmt.setObject(index ++, params.get(i));  
67.             }  
68.         }  
69.         result = pstmt.executeUpdate();  
70.         flag = result >0 ? true : false;  
71.         return flag;  
72.     }  
73.     /** 
74.      * 执行查询操作 
75.      * sql sql语句 
76.      * params 执行参数 
77.      */  
78.     public List<Map<String, Object>> findResult(String sql,List<?> params)throws SQLException{  
79.         List<Map<String, Object>> list = new ArrayList<Map<String,Object>>();  
80.         int index = 1;  
81.         pstmt = connection.prepareStatement(sql);  
82.         /* 
83.          * 填充查询语句的参数 
84.          */  
85.         if(params != null && !params.isEmpty()){  
86.             for(int i = 0;i<params.size();i++){  
87.                 pstmt.setObject(index ++, params.get(i));  
88.             }  
89.         }  
90.         resultSet = pstmt.executeQuery();  
91.         /* 
92.          * 通过ResultSetMetaData获取一个ResultSet的列的类型和关于列的属性信息，如列名、列数等 
93.          */  
94.         ResultSetMetaData metaData = resultSet.getMetaData();  
95.         //获取列的数量  
96.         int cols_len = metaData.getColumnCount();  
97.         /* 
98.          * 遍历resultSet 
99.          */  
100.         while(resultSet.next()){  
101.             Map<String,Object> map = new HashMap<String, Object>();  
102.             for(int i= 0;i<cols_len;i++){  
103.                 //获取列名  
104.                 String cols_name = metaData.getColumnName(i+1);  
105.                 //根据列名获取列值  
106.                 Object cols_value = resultSet.getObject(cols_name);  
107.                 if(cols_value == null){  
108.                     cols_value ="";  
109.                 }  
110.                 map.put(cols_name, cols_value);  
111.             }  
112.             list.add(map);  
113.         }  
114.         return list;  
115.     }  
116.     /** 
117.      * 释放资源 
118.      *  
119.      */  
120.     public void releaseConn(){  
121.         if(resultSet != null){  
122.             try {  
123.                 resultSet.close();  
124.             } catch (SQLException e) {  
125.                 e.printStackTrace();  
126.             }  
127.         }  
128.         if(pstmt != null){  
129.             try {  
130.                 pstmt.close();  
131.             } catch (SQLException e) {  
132.                 e.printStackTrace();  
133.             }  
134.         }  
135.         if(connection != null){  
136.             try {  
137.                 connection.close();  
138.             } catch (SQLException e) {  
139.                 e.printStackTrace();  
140.             }  
141.         }  
142.     }  
143. }  

数据库配置文件

[plain]  view plain  copy

1. jdbc.username=root  
2. jdbc.password=limeng  
3. jdbc.driver=com.mysql.jdbc.Driver  
4. jdbc.url=jdbc\:mysql\://127.0.0.1\:3306/pager  

创建Dao层，数据操作对象

接口 StudentDao.java

[java]  view plain  copy

1. public interface StudentDao {  
2.     /** 
3.      * 根据查询条件，查询学生分页信息 
4.      * @param searchModel 封装查询条件 
5.      * @param pageNum 查询第几条数据 
6.      * @param pageSize 显示多少数据 
7.      * @return 
8.      */  
9.     public Pager<Student> findStudent(Student searchModel,int pageNum,int pageSize);  
10. }  

Dao层接口实现类 SublistStudentDaoImpl.java

[java]  view plain  copy

1. public class SublistStudentDaoImpl implements StudentDao{  
2.     @Override  
3.     public Pager<Student> findStudent(Student searchModel, int pageNum,  
4.             int pageSize) {  
5.         /* 
6.          * 根据条件获取所有数据 
7.          */  
8.         List<Student> allStudentList = getAllStudent(searchModel);  
9.         /* 
10.          * 根据参数创建分页对象 
11.          */  
12.         Pager<Student> pager = new Pager<Student>(pageNum,pageSize,allStudentList);  
13.         return pager;  
14.     }  
15.     /* 
16.      * 获取所有数据 
17.      */  
18.     private List<Student> getAllStudent(Student searchModel){  
19.         List<Student> result = new ArrayList<Student>();  
20.         List<Object> paramList = new ArrayList<Object>();  
21.         String stuName = searchModel.getStuName();  
22.         int gender = searchModel.getGender();  
23.         StringBuilder sql = new StringBuilder("select * from t_student where 1=1");  
24.         if(stuName != null && !stuName.equals("")){  
25.             sql.append(" and stu_name like ?");  
26.             paramList.add("%"+stuName+"%");  
27.         }  
28.         if(gender == Constant.GENDER_FEMALE || gender== Constant.GENDER_MALE){  
29.             sql.append(" and gender = ?");  
30.             paramList.add(gender);  
31.         }  
32.         JdbcUtil jdbcUtil = null;  
33.         try {  
34.             jdbcUtil = new JdbcUtil();  
35.             jdbcUtil.getConnection();  
36.             List<Map<String, Object>> mapList = jdbcUtil.findResult(sql.toString(), paramList);  
37.             if(mapList != null){  
38.                 for(Map<String, Object> map : mapList){  
39.                     Student s = new Student(map);  
40.                     result.add(s);  
41.                 }  
42.             }  
43.         } catch (SQLException e) {  
44.             throw new RuntimeException("查询所有数据异常！",e);  
45.         }finally{  
46.             if(jdbcUtil != null){  
47.                 jdbcUtil.releaseConn();  
48.             }  
49.         }  
50.         return result;  
51.     }  
52. }  

创建Service层，调用Dao层

[java]  view plain  copy

1. public class SublistStudentServiceImpl implements StudentService{  
2.       
3.     private StudentDao studentDao;  
4.     public SublistStudentServiceImpl(){  
5.         //创建service实现类时，初始化dao对象  
6.         studentDao = new SublistStudentDaoImpl();  
7.     }  
8.     @Override  
9.     public Pager<Student> findStudent(Student searchModel, int pageNum,  
10.             int pageSize) {  
11.         Pager<Student> result = studentDao.findStudent(searchModel, pageNum, pageSize);  
12.         return result;  
13.     }  
14.     public StudentDao getStudentDao() {  
15.         return studentDao;  
16.     }  
17.     public void setStudentDao(StudentDao studentDao) {  
18.         this.studentDao = studentDao;  
19.     }  
20. }  

创建Servlet，接收参数，调用Service层

[java]  view plain  copy

1. public class SublistServlet extends HttpServlet {  
2.     //创建service对象  
3.     private StudentService studentService = new SublistStudentServiceImpl();  
4.     public SublistServlet() {  
5.         super();  
6.     }  
7.     public void destroy() {  
8.         super.destroy(); // Just puts "destroy" string in log  
9.         // Put your code here  
10.     }  
11.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
12.             throws ServletException, IOException {  
13.         doPost(request, response);  
14.     }  
15.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
16.             throws ServletException, IOException {  
17.         /* 
18.          * 设置编码格式，防止解析中文参数乱码 
19.          */  
20.         request.setCharacterEncoding("utf-8");  
21.         /* 接收request参数 
22.          * 学生姓名 
23.          */  
24.         String stuName = request.getParameter("stuName");  
25.         /* 
26.          * 性别，默认是0，表示全部，不论男女 
27.          */  
28.         int gender = Constant.DEFAULT_GENDER;  
29.         String genderStr = request.getParameter("gender");  
30.         if(genderStr != null && !"".equals(genderStr.trim())){  
31.             gender = Integer.parseInt(genderStr);// 获取学生性别  
32.         }  
33.         /* 
34.          * 当前请求第几页 
35.          */  
36.         int pageNum = Constant.DEFAULT_PAGENUM;  
37.         String pageNumStr = request.getParameter("pageNum");  
38.         //参数校验，是否是数字  
39.         if(pageNumStr != null && !StringUtil.isNum(pageNumStr)){  
40.             request.setAttribute("errorMsg", "参数输入错误");  
41.             request.getRequestDispatcher("sublistStudent.jsp").forward(request,  
42.                     response);  
43.             return;  
44.         }  
45.         if(pageNumStr != null && !"".equals(pageNumStr.trim())){  
46.             pageNum = Integer.parseInt(pageNumStr);//获取当前请求第几页  
47.         }  
48.         /* 
49.          * 每页显示多少条数据 
50.          */  
51.         int pageSize = Constant.DEFAULT_PAGE_SIZE;  
52.         String pageSizeStr = request.getParameter("pageSize");  
53.         if(pageSizeStr != null && !"".equals(pageSizeStr.trim())){  
54.             pageSize = Integer.parseInt(pageSizeStr);// 每页显示多少条记录  
55.         }  
56.         // 组装查询条件  
57.         Student searchModel = new Student();  
58.         searchModel.setStuName(stuName);  
59.         searchModel.setGender(gender);  
60.         // 调用service查询结果  
61.         Pager<Student> result = studentService.findStudent(searchModel,  
62.                 pageNum, pageSize);  
63.         // 返回结果到页面  
64.         request.setAttribute("result", result);  
65.         request.getRequestDispatcher("sublistStudent.jsp").forward(request,  
66.                 response);  
67.     }  
68. }  

Jsp页面

[java]  view plain  copy

1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
2.     pageEncoding="UTF-8"%>  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
4. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
5. <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>  
6. <html>  
7. <head>  
8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
9. <title>学生信息</title>  
10. </head>  
11. <%  
12.     // 获取请求的上下文  
13.     String context = request.getContextPath();  
14. %>  
15. <script type="text/javascript">  
16. // 当前第几页数据  
17. var currentPage = ${result.currentPage};  
18. // 总页数  
19. var totalPage = ${result.totalPage};  
20.   
21. function submitForm(actionUrl){  
22.     var formElement = document.getElementById("stuForm");  
23.     formElement.action = actionUrl;  
24.     formElement.submit();  
25. }  
26.   
27. // 第一页  
28. function firstPage(){  
29.     if(currentPage == 1){  
30.         alert("已经是第一页数据");  
31.         return false;  
32.     }else{  
33.         submitForm("<%=context %>/sublist/SublistServlet?pageNum=1");  
34.         return true;  
35.     }  
36. }  
37.   
38. // 下一页  
39. function nextPage(){  
40.     if(currentPage == totalPage){  
41.         alert("已经是最后一页数据");  
42.         return false;  
43.     }else{  
44.         submitForm("<%=context %>/sublist/SublistServlet?pageNum=" + (currentPage+1));  
45.         return true;  
46.     }  
47. }  
48.   
49. // 上一页  
50. function previousPage(){  
51.     if(currentPage == 1){  
52.         alert("已经是第一页数据");  
53.         return false;  
54.     }else{  
55.         submitForm("<%=context %>/sublist/SublistServlet?pageNum=" + (currentPage-1));  
56.         return true;  
57.     }  
58. }  
59.   
60. // 尾页  
61. function lastPage(){  
62.     if(currentPage == totalPage){  
63.         alert("已经是最后一页数据");  
64.         return false;  
65.     }else{  
66.         submitForm("<%=context %>/sublist/SublistServlet?pageNum=${result.totalPage}");  
67.         return true;  
68.     }  
69. }  
70. /* 
71.  * 在初次加载时默认选择全部 
72.  */  
73. function initPage(){  
74.     var genderRequest = "${gender}" ;  
75.     var genderVal = 0;  
76.     var genderElement = document.getElementById("gender");  
77.     if(genderRequest != ""){  
78.         genderVal = parseInt(genderRequest);  
79.     }  
80.       
81.     var options = genderElement.options;  
82.     var i = 0;  
83.     for(i = 0; i < options.length; i++){  
84.         if(options[i].value == genderVal){  
85.             options[i].selected=true;  
86.             break;  
87.         }  
88.     }  
89. }  
90. </script>  
91. <body οnlοad="initPage();">  
92.     <div style="margin-left: 100px; margin-top: 100px;">  
93.         <div>  
94.             <font color="red">${errorMsg }</font>  
95.         </div>  
96.         <div>  
97.             <form action="<%=context %>/sublist/SublistServlet"   id="stuForm"  method="post">  
98.                 姓名  
99.                 <input type="text" name="stuName" id="stu_name" style="width:120px" value="${stuName }">  
100.                    
101.                 性别  
102.                 <select name="gender" id="gender" style="width:80px">  
103.                     <option value="0">全部</option>  
104.                     <option value="1">男</option>  
105.                     <option value="2">女</option>  
106.                 </select>  
107.                     
108.                 <input type="submit" value="查询">  
109.             </form>  
110.         </div>          
111.         <br>  
112.         学生信息列表：<br>  
113.         <br>  
114.         <!-- 后台返回结果为空 -->  
115.         <c:if test="${fn:length(result.dataList) eq 0 }">  
116.             <span>查询的结果不存在</span>  
117.         </c:if>  
118.           
119.         <!-- 后台返回结果不为空 -->  
120.         <c:if test="${fn:length(result.dataList) gt 0 }">  
121.             <table border="1px" cellspacing="0px"  
122.                 style="border-collapse: collapse">  
123.                 <thead>  
124.                     <tr height="30">  
125.                         <th width="130">姓名</th>  
126.                         <th width="130">性别</th>  
127.                         <th width="130">年龄</th>  
128.                         <th width="190">家庭地址</th>  
129.                     </tr>  
130.                 </thead>  
131.                     <c:forEach items="${result.dataList }" var="student">  
132.                         <tr>  
133.                             <td><c:out value="${student.stuName}"></c:out></td>  
134.                             <td>  
135.                                 <c:if test="${ student.gender eq 1}">男</c:if>  
136.                                 <c:if test="${ student.gender eq 2}">女</c:if>  
137.                             </td>  
138.                             <td><c:out value="${student.age }"></c:out></td>  
139.                             <td><c:out value="${student.address }"></c:out></td>  
140.                         </tr>  
141.                     </c:forEach>  
142.             </table>  
143.             <br> 共${result.totalRecord }条记录共${result.totalPage }页  当前第${result.currentPage }页    
144.             <a href="#" οnclick="firstPage();">首页</a>     
145.             <a href="#" οnclick="nextPage();">下一页</a>     
146.             <a href="#" οnclick="previousPage();">上一页</a>    
147.             <a href="#" οnblur="lastPage();">尾页</a>   
148.         </c:if>  
149.     </div>  
150. </body>  

1. </html>  

page工具类 计算

package cn.strutsdemo.utils;


import java.util.List;


import cn.strutsdemo.pojo.House;


public class PageBean {


private List<House> list; // 通过hql从数据库分页查询出来的list集合
private int allRows;//总行数
private int totalPage;//总页数共页一共有多少页
private int currentPage;//当前所在页当前页

/**
* 得到总页数
* 
* @param pageSize
*            每页记录数
* @param allRows
*            总记录数
* @return 总页数
*/
public int getTotalPages(int pageSize, int allRows) {
int totalPage = (allRows % pageSize == 0) ? (allRows / pageSize) : (allRows / pageSize) + 1;
return totalPage;
}


/**
* 得到当前开始记录号
* 
* @param pageSize
*            每页记录数
* @param currentPage
*            当前页
* @return
*/
public int getCurrentPageOffset(int pageSize, int currentPage) {
int offset = pageSize * (currentPage - 1);
return offset;
}


/**
* 得到当前页， 如果为0 则开始第一页，否则为当前页
* 
* @param page
* @return
*/
public int getCurPage(int page) {
int currentPage = (page == 0) ? 1 : page;
return currentPage;
}


public List<House> getList() {
return list;
}


public void setList(List<House> list) {
this.list = list;
}


public int getAllRows() {
return allRows;
}


public void setAllRows(int allRows) {
this.allRows = allRows;
}


public int getTotalPage() {
return totalPage;
}


public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}


public int getCurrentPage() {
return currentPage;
}


public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
}