Java EE + BootStrap 实现简单分页逻辑
- 一、项目准备
- 二、数据库准备
- 三、视图界面编写
- 四、后台处理
- 4.1 封装 BaseDao
- 4.2 对应的学生实体类
- 4.3 分页后台逻辑 GetAllServlet
- 五、运行效果
一、项目准备
- 准备一张单表，以学生为例，需要如下列，id，sname，sage，sgender
- index.jsp 用于跳转页面，second.jsp 用于显示分页查询的数据
- getAllServlet 用于查询分页数据，并返回给前端
二、数据库准备
我使用的 mysql 数据库，数据库版本是 5.7，然后插入一些随机数据用于测试使用，因为要用到分页查询，所以我们使用 sql 中的 limit 关键字指定查询的页数
select * from student limit ?,?
下面是数据库中所有的测试数据
三、视图界面编写
- index.jsp 该界面仅仅是作为一个中转界面，用于对后端的 Servlet 发送一个请求
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<!-- 使用 a 标签默认发起的是一个 get 请求，我们携带一个 pageNo 参数，代表从第几页开始查询，和数据库中 查询语句 limit ?,? 第一个 ？ 相互对应 -->
<a href="GetAllServlet?pageNo=1">学生数据</a>
</body>
</html>
- second.jsp 数据显示的界面
<%@ 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"/> <!-- 这里面包含了 BootStrap 的相关库 -->
</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>
<!-- 使用 JSTL 中的 c:forEach 语法把页面渲染处来 -->
<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"><a class="page-link" href=GetAllServlet?pageNo=<%=1%>"><%=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<pageCount}">
<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
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 表的列一一对应
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,，这里面还有几个特殊的参数要特别说明一下
- pageNo 代表查询第几列数据
- pageSize：每页要展示多少条数据，也就是 limit ?,? 中的第二个值（固定值）
- count：代表数据库中总记录数，这个是需要我们在数据库中 查询总共有多少条记录（select count(*) from student）
- pageCount: 当前页面要展示的数据的条数
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);
}
}
五、运行效果
第一页
第三页
