在你需要导出显示大量列表时,在一页中都显示出来,是不美观页不实用的。在这种时候,就需要设置一个分页来显示你的内容,如百度的分页:
分页分为:前段分页和后端分页
后端分页:
首先我们应该确定,我们要分页,都需要从哪得到哪些数据:
Page<T>类
在Servlet中得到:
int pageNumber //当前页码 , 该数据在Servlet中获取
int pageSize //每页显示的条数 , 在Servlet中指定
后期计算得到:
int index // 分页开始的索引 , 通过计算获得
int totalPage // 总页数 , 需要通过计算获得
从数据库中导出:
int totalRecord // 总记录 , 通过查询数据库获得
List<T> data; // 分页的数据 , 通过数据库查询
分页查询时,DAO、Service的分工
Service:
pageNumber
pageSize
DAO:
int totalRecord
List<T> data
下面是Page类,在这里声明了上面我们需要的6个数据中的4个,index、totalPage 2个需要计算得到的,我们就不在这里面声明了。这个page类可以拿过去直接使用的:
public class Page<T> { private int pageNumber; private int pageSize; private int totalRecord; private List<T> data; private String path; public Page(int pageNo, int pageSize, int totalRecord) { super(); this.pageNumber = pageNo; this.pageSize = pageSize; this.totalRecord = totalRecord; } public int getPageNumber() { if(pageNumber < 1){ return 1; } if(pageNumber > getTotalPage()){ return getTotalPage(); } return pageNumber; } public void setPageNumber(int pageNumber) { this.pageNumber = pageNumber; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getTotalPage() { if(getTotalRecord()%getPageSize()==0){ return getTotalRecord()/getPageSize(); }else{ return getTotalRecord()/getPageSize()+1; } } public int getTotalRecord() { return totalRecord; } public void setTotalRecord(int totalRecord) { this.totalRecord = totalRecord; } public int getIndex() { return (getPageNumber() - 1) * getPageSize(); } public List<T> getData() { return data; } public void setData(List<T> data) { this.data = data; } public String getPath() { return path; } public void setPath(String path) { this.path = path; } }
Servlet关键代码
protected void getStuList(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String url = WebUtils.getPath(request); Page<Student> page=stuService.findAll(pageNo, pageSize); page.setPath(url); request.setAttribute("page",page ); request.getRequestDispatcher("/studentList.jsp").forward(request, response); }
Dao关键代码:从数据库中导出 totalRecord 、List<T> data;
public static int getTotalRecord() { PreparedStatement ps=null; ResultSet rs = null; Connection conn = Utils.getConnection(); String sql = " SELECT COUNT(*) AS total FROM student"; int total=0; try { ps =conn.prepareStatement(sql); rs = ps.executeQuery(); if(rs.next()){ total = rs.getInt("total"); } } catch (SQLException e) { // e.printStackTrace(); }finally{ Utils.close(conn, ps, rs); } return total; } public List<Student> getLimitStuList(int index, int pageSize) { PreparedStatement ps=null; ResultSet rs = null; Connection conn = Utils.getConnection(); String sql = " SELECT * FROM student limit ? , ?"; List<Student> list= new ArrayList<Student>(); try { ps =conn.prepareStatement(sql); ps.setInt(1, index); ps.setInt(2, pageSize); rs = ps.executeQuery(); while(rs.next()){ int id = rs.getInt("id"); String name = rs.getString("name"); String school = rs.getString("school"); double score = rs.getDouble("score"); list.add(new Student(id,name,school,score)); } } catch (SQLException e) { // e.printStackTrace(); }finally{ Utils.close(conn, ps, rs); } return list; }
这就是后端的一些关键代码,下面我们看下前段分页。
前段分页:这是一个JSP代码
百度是页里最多只显示10个页码
咱们设计为页面中最多显示5页码
这个问题就转变成了需要动态的设置forEach中begin和end的值
根据不同的情况去设置begin和end的值
第一种情况,总页数小于等于5
begin=1 end=总页数
第二种情况,当前页 小于等于 3
begin=1 end=5
第三种情况,当前页 大于3
lbegin=当前页-2 end=当前页+2
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <script type="text/javascript" src="${pageContext.request.contextPath}/ab/jquery.min.js"></script> <div id="page_nav" align="center"> <a href="${page.path}&pageNo=1">首页</a> <a href="${page.path}&pageNo=${page.pageNumber -1 }">上一页</a> <c:choose> <c:when test="${page.totalPage <= 5 }" > <c:set var="begin" value="1"></c:set> <c:set var="end" value="${page.totalPage}"></c:set> </c:when> <c:when test="${page.pageNumber <= 3 }"> <c:set var="begin" value="1"></c:set> <c:set var="end" value="5"></c:set> </c:when> <c:otherwise> <c:set var="begin" value="${page.pageNumber-2}"></c:set> <c:set var="end" value="${page.pageNumber+2}"></c:set> <c:if test="${end > page.totalPage }"> <c:set var="begin" value="${page.totalPage-4}"></c:set> <c:set var="end" value="${page.totalPage}"></c:set> </c:if> </c:otherwise> </c:choose> <c:forEach begin="${begin }" end="${end}" var="num"> <c:if test="${page.pageNumber == num }"> 【${num}】 </c:if> <c:if test="${page.pageNumber != num }"> <a href="${page.path}&pageNo=${num}">${num }</a> </c:if> </c:forEach> <a href="${page.path}&pageNo=${page.pageNumber +1}">下一页</a> <a href="${page.path}&pageNo=${page.totalPage}">末页</a> 共${page.totalPage }页,${page.totalRecord }条记录到,去第<input value="${page.totalPage }" name = "pn" id ="pn_input"/>页 <input type="button" value="确定" id="btn_id"/> <script type="text/javascript"> $("#btn_id").click(function(){ var value= $("#pn_input").val(); window.location="${page.path}&pageNo="+value; }); </script> </div>
上面的jsp可以直接用,直接加到你要导出显示的列表的下面:
<c:forEach items="${page.data}" var="stu"> <tr> <td>${stu.name }</td> <td>${stu.school }</td> <td>${stu.score }</td> <td><a href="${pageContext.request.contextPath}/FindAllServlet?method=toUpdatePage&id=${stu.id}" >修改</a></td> <td><a href="#?${stu.id}">删除</a></td> </tr> </c:forEach> <tr><td colspan="5" align="center"><a href="#">添加</a></td></tr> </table> <br/> <%@ include file="/Page.jsp" %>
但是要注意,一定要导入jar包和js包
运行结果: