小伙伴们应该都知道,我们在项目开发中经常要用到分页功能,现在我们一般都会使用各种分页插件来进行快速实现。不过在面试的时候,面试官有时会问我们分页的实现过程与原理,这就有点让人防不胜防了。所以为了防止大家在面试时手足无措,索尔就用最原始的技术来带各位实现一下分页效果,希望能够让大家弄清楚分页的底层原理!
内容导读
本文的核心内容主要分为如下几部分:
- 程序结构
- JSP页面设计
- 分页主要编码
- 效果展示
一. 程序结构
本项目虽小,但也是遵循三层架构的。对啦,不要忘了在项目中导入tomcat、JRE、mysql的依赖库文件,我这里用的是Eclipse工具。
因为项目中用到了JSP标签,所以我们需要在tomcat安装文件夹中的lib子文件夹下放好jstl-1.2.jar与standard.jar文件,如果有的话就不用管它了。项目的代码及依赖结构如下图所示:
二. JSP页面设计
接下来是本项目所用的jsp页面文件,主要有以下几个。
1. 创建index.jsp网页文件
<%@ page language="java" contentType="text/html;
charset=utf-8" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>我的信息查询</title>
<link rel="stylesheet"
type="text/css" href="css/index.css" rel="external nofollow">
</head>
<body>
<h2>信息分页查询</h2>
<div class="wrap">
<table class="tab" border="2">
<tr>
<th>学号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<c:forEach items="${pg.list}" var="stu">
<tr>
<td><c:out value="${stu.sid}" /></td>
<td><c:out value="${stu.sname}" /></td>
<td><c:out value="${stu.score}" /></td>
</tr>
</c:forEach>
</table>
</div>
<div class="set">
第<span id="currentPage">${pg.currentPage}</span>页 共<span
id="totalPage"> ${pg.totalPage}
</span>页 <a
href="index?currentPage=${0}">首页</a> <a
href="index?currentPage=${pg.currentPage-1}">上一页</a> <a
href="index?currentPage=${pg.currentPage+1}">下一页</a> <a
href="index?currentPage=${pg.totalPage}">尾页</a>转到第:<input id="jump"
type="text" />页 <input id="go" type="button" value="GO" />
</div>
</body>
<script type="text/javascript" src="js/index.js"></script>
</html>
2. play.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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>查询系统</title>
</head>
<body>
<jsp:forward page="index"></jsp:forward>
</body>
</html>
三. 分页主要编码
1. 创建分页文件Pagination
public class Pagination<T> {
private int currentPage;
// 总页号或总页数
private int totalPage;
// 每页记录数或行数
private int limitRows;
// 总的记录数或行数
private int totalRows;
// 每页开始的记录号
private int startRecord;
// 存每页中的记录
private List<T> list;
//初始化操作
public void init() {
// 1.1 求总页数,通过总记录数与每页行数来计算,有几种情况
// (1)不够一页(2)有零头(3)刚好是整数页
int tp = totalRows / limitRows;
if (totalRows > limitRows) {
totalPage = (totalRows %
limitRows) == 0 ? tp : tp + 1;
} else {
totalPage = 1;
}
// 1.2 将当页保留在第一页或最后一页
if (currentPage > totalPage) {
currentPage = totalPage;
} else if (currentPage <1) {
currentPage = 1;
}
// 1.3 初始化开始记录数,mysql应用的limit它不包括开始记录,所以不要加1;
// 还有limit传入的是开始记录号与查询的条数,此处是每页可显示数limitRows,
// 如果查到最后没有limitRows限制的行数,则显示剩余部分
this.startRecord = (currentPage -1) * limitRows;
}
public Pagination() {}
// 当前页号,总记录数,每页行数;这些属性需要传入后初始化,其它的可以set设置
public Pagination(int currentPage,int totalRows, int limitRows) {
this.currentPage = currentPage;
this.totalRows = totalRows;
this.limitRows = limitRows;
}
// 以下为简单的get与set方法,我给省略了
......
2. 创建StuService类
public class StuService {
//2.1 拿到记录条数
public static int getTotalRows() {
Dao dao = new DaoImpl();
return dao.getTotalRows();
}
//2.2 拿到每个分页数据
public static List<Stu> getList(int startRecord, int limitRows) {
Dao dao = new DaoImpl();
return dao.getList(startRecord, limitRows);
}
}
当然啦,还有数据库与表、实体类等也是需要我们创建的,大家可以根据项目需求自己去完成。
四. 效果展示
接下来就是本项目运行后的效果展示。
今天的内容就写到这里,现在你知道分页是怎么实现的了吗?