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

目录

前言

效果展示图如下

思路

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

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

使用的技术

代码

前端代码

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

后端代码

[对应的servlet 代码](#对应的servlet 代码)

实体类代码

[service的实现层 实现该功能的代码](#service的实现层 实现该功能的代码)

[dao层 实现层 实现 从数据库分页查询代码](#dao层 实现层 实现 从数据库分页查询代码)


前言

本篇博客的核心:

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

效果展示图如下

思路

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

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

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

  • 当前页码

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

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

总记录数

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

总页码

  • 总页码=总记录数%页容量==0 ?(总记录数/页容量 ):(总记录数/页容量+1

当前页码和页容量

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

展示给前端的数据

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

在分页查询中,获得第一个参数 值公式:(当前页码-1)*页容量

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

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

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

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

依此类推

使用的技术

c标签和el表达式

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

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

代码

前端代码

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>&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"><<</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);
      }
    }
相关推荐
"追风者"2 分钟前
前端(五)css属性
前端·css
ew452183 分钟前
【JAVA】bat批处理命令启动jar包
java·pycharm·jar·batch命令
letisgo54 分钟前
纯CSS实现文本或表格特效(连续滚动与首尾相连)
前端·css·animation
青岛少儿编程-王老师6 分钟前
CCF编程能力等级认证GESP—C++5级—20241207
java·开发语言·数据结构·c++·算法·青少年编程
跟着珅聪学java9 分钟前
maven 创建父子项目教程
java·数据库·maven
shangxianjiao11 分钟前
Javaweb web后端maven介绍作用安装
java·maven·idea
m0_7482563412 分钟前
微信小程序完整项目实战(前端+后端)
前端·微信小程序·notepad++
爪哇学长14 分钟前
Java应用性能优化:Redis与Memcached缓存
java·缓存·性能优化
DC_BLOG16 分钟前
数据结构绪论
java·数据结构·算法
跟着小郑学前端23 分钟前
Web前端技术宝典:期末冲刺指南
前端