使用前，后端写 具有分页效果的数据展示

目录

前言

效果展示图如下

思路

服务器从前端界面获得什么？

前端界面从后端服务器应该拿到什么？

使用的技术

代码

前端代码

list.jsp中该功能的实现代码

后端代码

对应的servlet 代码

实体类代码

service的实现层 实现该功能的代码

dao层 实现层 实现 从数据库分页查询代码

---

前言

本篇博客的核心：

• 理解如何实现具有分页的思路
• 理解对后端传递给前端的数据使用封装思想，封装成一个对象

效果展示图如下

思路

服务器从前端界面获得什么？

我们知道，当我们点击哪一页，就会给我们展示哪一页的数据

因此 我们需要获得 当前页码

• 当前页码

前端界面从后端服务器应该拿到什么？

从图中可以看到，总记录数，总页码，当前页码，页容量，展示给前端的数据

总记录数

• 需要从数据库中查一共多少条数据

总页码

• 总页码=总记录数%页容量==0 ？（总记录数/页容量 ）：（总记录数/页容量+1 ）

当前页码和页容量

• 当前页码，从前端直接获得
• 页容量自定义【本项目中，我在后端 代码固定 页容量为 2】
• 在这里我使用 封装思想 把这些整合成一个 Page类型的对象

展示给前端的数据

• 需要在数据库中使用分页查询

在分页查询中，获得第一个参数 值公式：（当前页码-1）*页容量

发现，在数据库中使用分页查询，表示首页的第一个参数是 0。表示第一条数据是从0开始的之后都是跳过多少条数据获得的。

如：假设 页容量是5，并且从 0 开始计数

第二页首行数据序号是5 表示跳过前5个数据到达该页

第三页首行数据序号是10表示跳过前10个数据到达该页

依此类推

使用的技术

c标签和el表达式

如果不清楚的可以看我的：

C标签和 EL表达式的在前端界面的应用-CSDN博客

代码

前端代码

list.jsp中该功能的实现代码

//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>&nbsp;<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">&laquo;</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">&raquo;</span></a></li></c:if><span style="font-size: 25px;margin-left: 5px;">共${page.count}条记录，共${page.totalPage}页</span></ul></nav></div>

后端代码

对应的servlet 代码

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 {@Overrideprotected 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);}}

实体类代码

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的实现层 实现该功能的代码

 @Overridepublic 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层 实现层 实现 从数据库分页查询代码

 @Overridepublic 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);}}