Day15--Servlet后端之Jsp了解学习（数据展示分页的实现）

news2025/1/11 9:55:55

JSP（Java Server Pages）是一种基于Java的动态网页开发技术，主要用于创建能够动态生成内容的Web应用程序。他可以前后端语言混合编写，用在编译后会变成一个类，你也可以理解为jsp文件就是一个servlet类，只是jsp对于前端界面的编写更加便捷。

<% 这里放的java代码 %>
<%!声明变量、方法和类的代码％>
1.在“<%!”和“％>”标记之间声明变量，即在“<%!”和“％>”之间放置 Java 的变量声明语句。变量的类型可以是 Java 语言允许的任何数据类型。我们将这些变量称为 JSP 页面的成员变量。

2.在“<%!”和“%>”标记之间声明的方法，在整个 JSP 页面有效，但是，方法内定义的变量只在方法内有效。
在这里插入图片描述
JSP中分页的实现：
先谈实现逻辑：
实现数据展示分页首先需要知道你有多少条数据，一页要展示几条数据，知道这两个数据后我们就能知道分页数，然后通过抽象查询语句实现分页数据的提取，
已知总数据条数info.size()，一页展示showCount条数据，当前页数PageIndex，则抽象sql如下：

SELECT * FROM 表名 LIMIT (PageIndex-1)*showCount,showCount;

我采用的是mybaits的注解+自己封装的GetMapper工具类实现的，相关看文章：
http://t.csdnimg.cn/jLPRQ
我的Mapper接口里的查询分页数据的代码是：

    @Select("select * from student limit #{Index},#{showPage}")
    List<Student> pageIndex(@Param("Index") Integer Index,@Param("showPage") Integer showPage);

知道每页有什么数据后就是写如何展示的逻辑了，请看代码注释：

<%@ page import="Dao.GetMapper" %>
<%@ page import="Model.Student" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理</title>
   
</head>
<body>
<div class="container">
    <h1>学生信息管理</h1>
    <div class="add-student"><a href="insert.jsp">添加学生</a></div>
    <table>
        <tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th><th>专业</th><th>操作</th><th>操作1</th></tr>
        <%
            GetMapper getMapper = new GetMapper();//我封装的工具类
            List<Student> info1 = getMapper.selectAll();//获取所有学生信息对象
            int showCount = 2;//每一页展示的数据条数
            int totalPages = (int) Math.ceil(info1.size() * 1.0 / showCount);//获取应该分的总页数，并做向上取整
            //三模运算：当request.getParameter("PageNum") == null成立时PageIndex为1否则就为点击上一页、下一页分页按钮传来的参数
            int PageIndex = request.getParameter("PageNum") == null ? 1 : Integer.parseInt(request.getParameter("PageNum"));
            List<Student> info = getMapper.pageIndex(PageIndex, showCount);//查询分页数据，这个方法在GetMapper中实现的时候已经实现了抽象sql的逻辑

            for (Student student : info) {
        %>
        <tr>
            <td><%= student.getSno() %></td>
            <td><%= student.getName() %></td>
            <td><%= student.getSex() %></td>
            <td><%= student.getAge() %></td>
            <td><%= student.getMajor() %></td>
            <td class="action-links"><a class="delete-link" href="DelUser?Sno=<%= student.getSno() %>" onclick="return confirm('确认删除吗？');">删除</a></td>
            <td class="action-links"><a class="update-link" href="Update?Sno=<%= student.getSno() %>">更新</a></td>
        </tr>
        <%
            }
        %>
    </table>

    <div class="pagination">
        <%
            if (PageIndex > 1) {//当当前页数大于1时首页和上一页不能点击
        %>
        <a href="paging.jsp?PageNum=1">首页</a>
        <a href="paging.jsp?PageNum=<%= PageIndex - 1 %>">上一页</a>
        <%
        } else {
        %>
        <span class="disabled">首页</span>
        <span class="disabled">上一页</span>
        <%
            }
            if (PageIndex < totalPages) {//当前页数大于1，小于最大页数时首都可以点击
        %>
        <a href="paging.jsp?PageNum=<%= PageIndex + 1 %>">下一页</a>
        <a href="paging.jsp?PageNum=<%= totalPages %>">尾页</a>
        <%
        } else {//不在上面两种情况，即当前页就是尾页时，尾页下一页无法点击
        %>
        <span class="disabled">下一页</span>
        <span class="disabled">尾页</span>
        <%
            }
        %>
    </div>
</div>
</body>
</html>

美化样式代码

 <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .container {
            max-width: 900px;
            margin: 30px auto;
            background: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #007BFF;
            margin-bottom: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #007BFF;
            color: #ffffff;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
        a {
            text-decoration: none;
            color: #007BFF;
            font-weight: bold;
        }
        a:hover {
            text-decoration: underline;
        }
        .pagination {
            text-align: center;
            margin: 20px 0;
        }
        .pagination a, .pagination span {
            display: inline-block;
            padding: 10px 20px;
            margin: 0 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            color: #007BFF;
            transition: background-color 0.3s, color 0.3s;
        }
        .pagination a:hover {
            background-color: #007BFF;
            color: #ffffff;
        }
        .pagination .disabled {
            color: #b0b0b0;
            border-color: #b0b0b0;
            cursor: not-allowed;
        }
        .action-links a {
            display: inline-block;
            margin: 0 5px;
            padding: 6px 12px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: bold;
        }
        .delete-link {
            background-color: #dc3545;
            color: #ffffff;
        }
        .update-link {
            background-color: #28a745;
            color: #ffffff;
        }
        .action-links a:hover {
            opacity: 0.9;
        }
        .add-student {
            text-align: right;
            margin-bottom: 15px;
        }
        .add-student a {
            background-color: #007BFF;
            color: #ffffff;
            padding: 10px 20px;
            border-radius: 4px;
            font-weight: bold;
            text-decoration: none;
        }
        .add-student a:hover {
            background-color: #0056b3;
        }
    </style>