目录
[对应的servlet 代码](#对应的servlet 代码)
[service的实现层 实现该功能的代码](#service的实现层 实现该功能的代码)
[dao层 实现层 实现 从数据库分页查询代码](#dao层 实现层 实现 从数据库分页查询代码)
前言
本篇博客的核心:
- 理解如何实现具有分页的思路
- 理解对后端传递给前端的数据使用封装思想,封装成一个对象
效果展示图如下
思路
服务器从前端界面获得什么?
我们知道,当我们点击哪一页,就会给我们展示哪一页的数据
因此 我们需要获得当前页码
- 当前页码
前端界面从后端服务器应该拿到什么?
从图中可以看到,总记录数,总页码,当前页码,页容量,展示给前端的数据
总记录数
- 需要从数据库中查一共多少条数据
总页码
- 总页码=总记录数%页容量==0 ?(总记录数/页容量 ):(总记录数/页容量+1)
当前页码和页容量
- 当前页码,从前端直接获得
- 页容量自定义【本项目中,我在后端 代码固定 页容量为 2】
- 在这里我使用 封装思想 把这些整合成一个 Page类型的对象
展示给前端的数据
- 需要在数据库中使用分页查询
在分页查询中,获得第一个参数 值公式:(当前页码-1)*页容量
发现,在数据库中使用分页查询,表示首页的第一个参数是 0。表示第一条数据是从0开始的之后都是跳过多少条数据获得的。
如:假设 页容量是5,并且从 0 开始计数
第二页首行数据序号是5 表示跳过前5个数据到达该页
第三页首行数据序号是10表示跳过前10个数据到达该页
依此类推
使用的技术
c标签和el表达式
如果不清楚的可以看我的:
代码
前端代码
list.jsp中该功能的实现代码
html//list.jsp 对应的servlet是 ListByPageServlet <table border="1" class="table table-bordered table-hover"> <tr class="success"> <th><input type="checkbox" ></th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>籍贯</th> <th>QQ</th> <th>邮箱</th> <th>操作</th> </tr> <c:forEach items="${page.records}" var="user" varStatus="s"> <tr> <td><input type="checkbox" name="id" value="${user.id}"></td> <td>${s.index}</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="/users/checkUpdate?pageIndex=${page.pageIndex}&id=${user.id}">修改</a> <a class="btn btn-default btn-sm" href="/users/delete?pageIndex=${page.pageIndex}&id=${user.id}">删除</a></td> </tr> </c:forEach> </table> <div> <nav aria-label="Page navigation"> <ul class="pagination"> <c:if test="${page.pageIndex>1}"> <li> <a href="/users/listByPage?pageIndex=${page.pageIndex-1}" aria-label="Previous"> <span aria-hidden="true"><<</span> </a> </li> </c:if> <c:forEach var="i" begin="1" end="${page.totalPage}" step="1"> <c:choose> <c:when test="${i==page.pageIndex}"> <li class="active"><span>${i}</span></li> </c:when> <c:otherwise> <li ><a href="/users/listByPage?pageIndex=${i}">${i}</a></li> </c:otherwise> </c:choose> </c:forEach> <c:if test="${page.pageIndex<page.totalPage}"> <li> <a href="/users/listByPage?pageIndex=${page.pageIndex+1}" aria-label="Next"> <span aria-hidden="true">>></span> </a> </li> </c:if> <span style="font-size: 25px;margin-left: 5px;"> 共${page.count}条记录,共${page.totalPage}页 </span> </ul> </nav> </div>
后端代码
对应的servlet 代码
java
package fs.web;
import fs.entity.Page;
import fs.entity.Userinfo;
import fs.service.UserinfoService;
import fs.service.impl.UserinfoServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/users/listByPage")
public class ListByPageServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//从数据库中查询用户 信息
//设置请求编码
req.setCharacterEncoding("UTF-8");
//获取请求参数
int pageIndex = Integer.parseInt(req.getParameter("pageIndex"));
int pageSize = 2;
UserinfoService userinfoService = new UserinfoServiceImpl();
Page<Userinfo> page = userinfoService.qurryByPage(pageIndex,pageSize);
//设置浏览器响应编码
resp.setContentType("text/html;charset=UTF-8");
// // 将数据保存到request请求域中
req.setAttribute("page",page);
req.getRequestDispatcher("/users/list.jsp").forward(req,resp);
}
}
实体类代码
java
package fs.entity;
import java.util.List;
public class Page<T> {
//记录(内容),总记录数,,总页码,当前页码,页容量
private Long count;
private Long totalPage;
private Integer pageIndex;
private Integer pageSize;
private List<T> records;
public Long getCount() {
return count;
}
public void setCount(Long count) {
this.count = count;
}
public Long getTotalPage() {
return count%pageSize==0?count/pageSize:(count/pageSize+1);
}
public Integer getPageIndex() {
return pageIndex;
}
public void setPageIndex(Integer pageIndex) {
this.pageIndex = pageIndex;
}
public Integer getPageSize() {
return pageSize;
}
public void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
}
public List<T> getRecords() {
return records;
}
public void setRecords(List<T> records) {
this.records = records;
}
}
service的实现层 实现该功能的代码
java
@Override
public Page<Userinfo> qurryByPage(int pageIndex, int pageSize) {
UserinfoDao userinfoDao = new UserinfoDaoImpl();
//查询总记录数
Long count = userinfoDao.qurryCount();
//查询当前页数据
List<Userinfo> records = userinfoDao.qurryByPage(pageIndex, pageSize);
Page<Userinfo> page = new Page<>();
page.setCount(count);
page.setPageIndex(pageIndex);
page.setPageSize(pageSize);
page.setRecords(records);
return page;
}
dao层 实现层 实现 从数据库分页查询代码
java
@Override
public List<Userinfo> qurryByPage(int pageIndex, int pageSize) {
QueryRunner qr=new QueryRunner();
Connection conn=null;
String sql="select * from tb_userinfo limit ?,?";
try {
conn=getConnection();
return qr.query(conn,sql,new BeanListHandler<Userinfo>(Userinfo.class),(pageIndex-1)*pageSize,pageSize);
} catch (Exception e) {
throw new RuntimeException(e);
}finally {
close(conn);
}
}