JAVAWeb分页功能实现

个人博客地址https://nfreak-man.cn
当管理成百上千条数据，并在列表显示时，数据全部放在一页显示效率低而且加载速度会变慢。这时就需要将数据分页显示。
示例：

具体思路为，编写 PageBean 获取总的记录数、每页显示条数和当前页码，并通过计算获取总页码数。并按页获取数据存入 list，每次点下一页获取之后的数据，每次点前一页显示之前的数据，根据当前页码和每页显示数，多次获取列表数据并显示。并要注意下一页上一页功能可能出现的bug。

编写 PageBean 类

public class PageBean<T> {
private int totalCount;//总记录数
private int totalPage;//总页码
private List<T> list;//每页的数据
private int currentPage;//当前页码
private int rows;//每页显示记录数

public int getTotalCount() {
return totalCount;
}

public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}

public int getTotalPage() {
return totalPage;
}

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

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

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

public int getCurrentPage() {
return currentPage;
}

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

public int getRows() {
return rows;
}

public void setRows(int rows) {
this.rows = rows;
}

@Override
public String toString() {
return "PageBean{" +
"totalCount=" + totalCount +
", totalPage=" + totalPage +
", list=" + list +
", currentPage=" + currentPage +
", rows=" + rows +
'}';
}
}

编写FindUserByPageServlet

从页面获取当前页码和每页显示条数，调用 service 进行查询

@WebServlet("/findUserByPageServlet")
public class FindUserByPageServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取参数
String currentPage = request.getParameter("currentPage");//当前页码
String rows = request.getParameter("rows");//每页显示条数
if(currentPage == null || "".equals(currentPage)){//防止空页面或参数丢失报错
currentPage = "1";
}
if(rows == null || "".equals(rows)){
rows = "5";
}
//调用service查询
UserSvice service = new UserServiceImpl();
PageBean<User> pb = service.finUserByPage(currentPage,rows);
//将PageBean存入request
request.setAttribute("pb",pb);
//转发到list.jsp
request.getRequestDispatcher("/list.jsp").forward(request,response);
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}

Service方法的编写

@Override
public PageBean<User> finUserByPage(String _currentPage, String _rows) {
int currentPage = Integer.parseInt(_currentPage);
int rows = Integer.parseInt(_rows);
if(currentPage <= 0){//防止用户在第一页时点击前一页报错
currentPage = 1;
}
//创建空的PageBean对象
PageBean<User> pb = new PageBean<User>();
//设置参数
pb.setCurrentPage(currentPage);
pb.setRows(rows);
//调用dao查询总记录数
int totalCount = dao.findTotalCount();
pb.setTotalCount(totalCount);
//调用dao查询list集合
//计算开始的记录的索引
int start = (currentPage - 1) * rows;
List<User> list = dao.findByPage(start,rows);
pb.setList(list);
//计算总页码
int totalPage = totalCount % rows == 0 ? totalCount/rows : totalCount/rows + 1;
pb.setTotalPage(totalPage);
return pb;
}

Dao方法编写

1. 获取数据总条数
2. 根据获取的要开始查找的索引 start 和 所需查找的条数 rows 查找对应数量数据

@Override
public int findTotalCount() {
String sql = "select count(*) from user";
return template.queryForObject(sql,Integer.class);
}

@Override
public List<User> findByPage(int start, int rows) {
String sql = "select * from user limit ? , ?";
return template.query(sql,new BeanPropertyRowMapper<User>(User.class),start,rows);
}

前端页面编写

<form id="form1" action="${pageContext.request.contextPath}/delSelectedServlet" method="post">
<table border="1" class="table table-bordered table-hover">
<tr class="success">
<th><input type="checkbox" id="firstCb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>QQ</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<c:forEach items="${pb.list}" var="user" varStatus="s">//将PageBean获取的list展示到页面
<tr>
<th><input type="checkbox" name="uid" value="${user.id}"></th>
<td>${s.count}</td>
<td>${user.name}</td>
<td>${user.gender}</td>
<td>${user.age}</td>
<td>${user.address}</td>
<td>${user.qq}</td>
<td>${user.email}</td>
<td><a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/findUserServlet?id=${user.id}">修改</a>&nbsp;
<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除</a></td>
</tr>
</c:forEach>
</table>
</form>
<div>//分页组件
<nav aria-label="Page navigation">
<ul class="pagination">
<c:if test="${pb.currentPage == 1}"><li class="disabled"></c:if>
<c:if test="${pb.currentPage != 1}"><li></c:if>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage - 1}&rows=5" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<c:forEach begin="1" end="${pb.totalPage}" var="i">
<c:if test="${pb.currentPage == i}">
<li class="active"><a 		                         href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5">${i}</a></li>
</c:if>
<c:if test="${pb.currentPage != i}">
<li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5">${i}</a></li>
</c:if>
</c:forEach>
//下一页按钮禁用状态及报错处理
<c:if test="${pb.currentPage == pb.totalPage}"><li class="disabled"><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage}&rows=5" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li></c:if>
<c:if test="${pb.currentPage < pb.totalPage}"><li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage + 1}&rows=5" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</c:if>

<span style="font-size: 25px;margin-left: 5px">
共${pb.totalCount}条记录，共${pb.totalPage}页
</span>
</ul>
</nav>
</div>

• 点赞
• 收藏
• 分享
• 文章举报