前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaEE + BootStrap 实现分页逻辑

JavaEE + BootStrap 实现分页逻辑

作者头像
Gorit
发布2021-12-08 21:46:15
9150
发布2021-12-08 21:46:15
举报
文章被收录于专栏:Gorit 带你学全栈系列

Java EE + BootStrap 实现简单分页逻辑

一、项目准备

  1. 准备一张单表,以学生为例,需要如下列,id,sname,sage,sgender
  2. index.jsp 用于跳转页面,second.jsp 用于显示分页查询的数据
  3. getAllServlet 用于查询分页数据,并返回给前端

二、数据库准备

我使用的 mysql 数据库,数据库版本是 5.7,然后插入一些随机数据用于测试使用,因为要用到分页查询,所以我们使用 sql 中的 limit 关键字指定查询的页数 select * from student limit ?,?

下面是数据库中所有的测试数据

三、视图界面编写

  1. index.jsp 该界面仅仅是作为一个中转界面,用于对后端的 Servlet 发送一个请求
代码语言:javascript
复制
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Titletitle>
head>
<body>
	
    <a href="GetAllServlet?pageNo=1">学生数据a>
body>
html>
  1. second.jsp 数据显示的界面
代码语言:javascript
复制
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>学生页面分页实现title>
    <jsp:include page="base.jsp"/> 
head>
<body>
<div class="container">
    <table class="table table-striped table-bordered text-center table-hover table-condensed" style="margin-top: 20px;">
        <thead>
        <tr>
            <td>学号td>
            <td>姓名td>
            <td>年龄td>
            <td>班级td>
        tr>
        thead>
        <tbody>
        
        <c:forEach var="list" items="${list}">
            <tr>
                <td>${list.getStuId()}td>
                <td>${list.getStuName()}td>
                <td>${list.getStuAge()}td>
                <td>${list.getClassz()}td>
            tr>
        c:forEach>
        tbody>
    table>
    
    <nav style="align-content: center">
        <ul id="pagination" class="pagination">
            <c:choose>
                <c:when test="${pageNo>1}">
                    <li class="page-item"><a class="page-link" href="GetAllServlet?pageNo=${pageNo-1}">上一页a>li>
                c:when>
                <c:otherwise>
                    <li class="page-item disabled"><a class="page-link" href="#">上一页a>li>
                c:otherwise>
            c:choose>
                      
                    <li class="page-item">"><%=1%>a>li>
                      
                     <li class="page-item disabled"><a class="page-link" href="#">...a>li>
                       
                    <li class="page-item"><a class="page-link" href="GetAllServlet?pageNo=${pageCount}">${pageCount}a>li>
                      
            <c:choose>
                <c:when test="${pageNo">
                    <li class="page-item"><a class="page-link" href="GetAllServlet?pageNo=${pageNo+1 }">下一页a>li>
                c:when>
                <c:otherwise>
                    <li class="page-item disabled"><a class="page-link" href="#">下一页a>li>
                c:otherwise>
            c:choose>
        ul>
    nav>
div>
body>
html>

四、后台处理

4.1 封装 BaseDao

代码语言:javascript
复制
import java.sql.*;

public class BaseDao {
    private String Driver = "com.mysql.jdbc.Driver";
    private static final String URL = "jdbc:mysql://localhost:3306/studentmanagementsystem?useUnicode=true&characterEncoding=utf8";
    private static final String USERNAME = "root";
    private static final String PASSWORD = "root";
    private Connection con = null;

    // 获取连接
    public PreparedStatement getConnect(String sql) throws SQLException {
        PreparedStatement ps = null;

        try {
            Class.forName(Driver);
            con = DriverManager.getConnection(URL,USERNAME,PASSWORD);
            ps = con.prepareStatement(sql);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return ps;
    }

    // 关闭连接
    public void closed(PreparedStatement ps, ResultSet set) throws SQLException {
        if (ps!=null) {
            ps.close();
        }
        if (set!=null) {
            set.close();
        }
        if (con!=null) {
            con.close();
        }
    }

}

4.2 对应的学生实体类

和数据库中的 student 表的列一一对应

代码语言:javascript
复制
public class Student {
    private String stuId;
    private String stuName;
    private int stuAge;
    private String classz; // 学生所在 年级 班级

    public Student(String stuId, String stuName, int stuAge, String classz) {
        this.stuId = stuId;
        this.stuName = stuName;
        this.stuAge = stuAge;
        this.classz = classz.toString();
    }
	// getter setter 省略
}

4.3 分页后台逻辑 GetAllServlet

这里接收一个前端穿过来的 pageNo,默认传值为 1,,这里面还有几个特殊的参数要特别说明一下

  1. pageNo 代表查询第几列数据
  2. pageSize:每页要展示多少条数据,也就是 limit ?,? 中的第二个值(固定值)
  3. count:代表数据库中总记录数,这个是需要我们在数据库中 查询总共有多少条记录(select count(*) from student)
  4. pageCount: 当前页面要展示的数据的条数
代码语言:javascript
复制
import cn.gorit.entity.Student;
import cn.gorit.util.BaseDao;

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 javax.servlet.http.HttpSession;
import javax.swing.text.Style;
import java.io.IOException;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

// 分页显示数据
@WebServlet("/GetAllServlet")
public class GetAllServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        // 封装 BaseDao,简化 JDBC 操作
        BaseDao db = new BaseDao();
        HttpSession session = request.getSession();
        int pageNo = 1; // 默认给一个 pagNo 为 1
        String str = request.getParameter("pageNo");
        str.replace("\"", "");
        System.out.println(str);
        if (str != null) {
            pageNo = Integer.valueOf(str);
        }

        int pageSize = 5; // 每页固定的展示数目
        int count = 0; // 求出最大条数
        try {
            PreparedStatement ps = db.getConnect("select count(*) from student");
            ResultSet rs = ps.executeQuery();
            if (rs.next()) {
                count = rs.getInt(1);
            }
            db.closed(ps,rs);
        } catch (SQLException e) {
            e.printStackTrace();
        }

//        System.out.println(count);

        //每页显示的条数
        int pageCount = 0;
        if (count%pageSize == 0) {
            pageCount = count/pageSize;

        } else {
            pageCount = count/pageSize+1;

        }
        
        PreparedStatement ps = null;
        ResultSet rs = null;
        ArrayList<Student> list = new ArrayList<Student>(); // 将学生信息存储到 列表中
        try {
            ps = db.getConnect("select * from student limit ?,?");
            ps.setInt(1,pageSize*(pageNo-1));
            ps.setInt(2,pageSize);
            rs = ps.executeQuery();
            while (rs.next()) {
                list.add(new Student(rs.getString(1),rs.getString(2),rs.getInt(3),rs.getString(4)));
            }
            db.closed(ps,rs);
        } catch (SQLException e) {
            e.printStackTrace();
        }

        session.setAttribute("pageNo",pageNo);
        session.setAttribute("pageCount",pageCount);
        session.setAttribute("list",list);
        response.sendRedirect("second.jsp");
    }

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

五、运行效果

第一页

第三页

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/04/29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Java EE + BootStrap 实现简单分页逻辑
  • 一、项目准备
  • 二、数据库准备
  • 三、视图界面编写
  • 四、后台处理
    • 4.1 封装 BaseDao
      • 4.2 对应的学生实体类
        • 4.3 分页后台逻辑 GetAllServlet
        • 五、运行效果
        相关产品与服务
        数据库
        云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档