当前位置：首页 > news >正文

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

news 2025/8/2 17:44:25

前言

效果展示图如下

思路

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

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

使用的技术

代码

前端代码

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

查看全文

http://www.lryc.cn/news/499322.html