在你需要导出显示大量列表时,在一页中都显示出来,是不美观页不实用的。在这种时候,就需要设置一个分页来显示你的内容,如百度的分页:
分页分为:前段分页和后端分页
后端分页:
首先我们应该确定,我们要分页,都需要从哪得到哪些数据:
Page<T>类
在Servlet中得到:
页码 , 该数据在Servlet中获取
每页显示的条数 , 在Servlet中指定
后期计算得到:
分页开始的索引 , 通过计算获得
总页数 , 需要通过计算获得
从数据库中导出:
总记录 , 通过查询数据库获得
的数据 , 通过数据库查询
分页查询时,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=总页数
第二种情况,当前页 小于等于
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包
运行结果: