JSP分页写法

一、写界面框架：

<html>
<head>
    <title>学生管理系统</title>
    <style>
        body { font-family: '微软雅黑'; background-color: #e0f7fa; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; margin-top: 150px;}
        .container { background-color: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 90%; max-width: 800px; text-align: center; }
        h1 { color: #00796b; margin-bottom: 20px; }
        .btn { display: block; width: 100%; padding: 12px; margin: 10px 0; font-size: 18px; color: #ffffff; background-color: #00796b; border: none; border-radius: 6px; cursor: pointer; }
        .btn:hover { background-color: #004d40; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        th { background-color: #e0f7fa; color: black; }
        tr:nth-child(even) { background-color: lightyellow; }
        tr:hover { background-color: #e0f7fa; }
    </style>
</head>
<body>

<div class='container'>
    <h1>学生信息管理</h1>

    <div><a href='insertStudent.jsp'>添加信息</a></div>
    <table>
        <tr><th>id</th><th>姓名</th><th>性别</th><th>年龄</th><th>操作一</th><th>操作二</th></tr>
        <tr>
            <td><%=findye.get(i).getID()%></td>
            <td><%=findye.get(i).getName()%></td>
            <td><%=findye.get(i).getSex()%></td>
            <td><%=findye.get(i).getAge()%></td>
            <td><a onclick=if(confirm('确定删除吗？'))return true; return false; href=delok?id=<%=findye.get(i).getID()%>>删除</a></td>
            <td><a href=update.jsp?id=<%=findye.get(i).getID()%>>更新</a></td>
            <%--            <a onclick=\"if(confirm('确定删除吗？')) return true; return false;\" href=delone?id="+findye.get(i).getId()+">删除</a>--%>
        </tr>
        <%
            }
        %>
    </table>

</div>
</body>
</html>

这样我们就得到了界面的基本框架。

二、写分页逻辑：

分页的写法只要写好两部分，一部分是当前页面的展示；另一部分是下一页面的展示。

当前页面的展示：

首先:我们要查询到展示的数据：

 InputStream  in = Resources.getResourceAsStream("mybatis-config.xml");
    SqlSessionFactory  factory = new SqlSessionFactoryBuilder().build(in);
    SqlSession sqlSession = factory.openSession();
    UserDao  userDao = sqlSession.getMapper(UserDao.class);
    List<user> all = userDao.findall();

这里用的是Mybatisd的方法；

其次就是当前页面要放多少数据和如何放数据的问题：

//1、设定每一页的记录数
    int pageSize=3;
    //2、计算总的记录数
    int size = all.size();
    //3、分页总数
//    int i1 = size/ pageSize;
    int i1=(size% pageSize==0?(size/ pageSize):(size/ pageSize+1));
    //4、初始化当前页
    int curage = 1;
    if (request.getParameter("curage") == null) {
        curage = 1;
    } else {
        curage= Integer.valueOf(request.getParameter("curage"));
    }
    int offset = (curage - 1) * pageSize; // 计算偏移量
//    int limit = pageSize; // 限制数量
    //构建sql语句查询当前页的记录数
//    String sql="select * from stu limit "+offset+", "+limit;
    //6、获取当前页数据
    List<user> findye = userDao.findye(offset,pageSize);

对于每页放多少数据，这个方法可以保证每页数据按顺序一页一页展示

//查找数据的Mybatis写法
@Select("select * from stu limit #{offset},#{pageSize}")
   List<user> findye(@Param("offset")Integer offset,@Param("pageSize")Integer pageSize);

这样我们就能保证当前页面的数据内容。

下一页展示：

这个if语句保证了页数的跳转，当浏览器的页数为空时，说明我们并没有点击页数的变换，那就是第一页。

当用户点击下一页时，也数就上传到了浏览器，这样我们就能抓取浏览器的数字从而实现页数的跳转。

跳转按钮的：

<%
        if(curage==1){
    %>
    <span>首页</span>
    <span>上一页</span>
    <a href="shoulist2.jsp?curage=<%=curage+1%>">下一页</a>
    <a href="shoulist2.jsp?curage=<%=i1%>">尾页</a>
    <%
        }else if (curage==i1){
    %>
    <a href="shoulist2.jsp?curage=1">首页</a>
    <a href="shoulist2.jsp?curage=<%=curage-1%>">上一页</a>
    <span>下一页</span>
    <span>尾页</span>
    <%
    }else{
    %>
    <a href="shoulist2.jsp?curage=1">首页</a>
    <a href="shoulist2.jsp?curage=<%=curage-1%>">上一页</a>
    <a href="shoulist2.jsp?curage=<%=curage+1%>">下一页</a>
    <a href="shoulist2.jsp?curage=<%=i1%>">尾页</a>
    <%
        }
    %>

当在首页或者尾页时，相应的按钮就被写成了普通的链接，也就是没法点击

跳转按钮应该和上面的if语句搭配着看，这样我们就得到了能分页的界面。

全部代码：

<%@ page import="java.util.List" %>
<%@ page import="mod.user" %>
<%@ page import="dao.UserDao" %>
<%@ page import="dao.tools" %>
<%@ page import="java.io.InputStream" %>
<%@ page import="org.apache.ibatis.session.SqlSessionFactory" %>
<%@ page import="org.apache.ibatis.session.SqlSession" %>
<%@ page import="org.apache.ibatis.io.Resources" %>
<%@ page import="org.apache.ibatis.session.SqlSessionFactoryBuilder" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生管理系统</title>
    <style>
        body { font-family: '微软雅黑'; background-color: #e0f7fa; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; margin-top: 150px;}
        .container { background-color: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 90%; max-width: 800px; text-align: center; }
        h1 { color: #00796b; margin-bottom: 20px; }
        .btn { display: block; width: 100%; padding: 12px; margin: 10px 0; font-size: 18px; color: #ffffff; background-color: #00796b; border: none; border-radius: 6px; cursor: pointer; }
        .btn:hover { background-color: #004d40; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        th { background-color: #e0f7fa; color: black; }
        tr:nth-child(even) { background-color: lightyellow; }
        tr:hover { background-color: #e0f7fa; }
    </style>
</head>
<body>
<%
    InputStream  in = Resources.getResourceAsStream("mybatis-config.xml");
    SqlSessionFactory  factory = new SqlSessionFactoryBuilder().build(in);
    SqlSession sqlSession = factory.openSession();
    UserDao  userDao = sqlSession.getMapper(UserDao.class);
    List<user> all = userDao.findall();

//    List<user> all = (List<user>) request.getAttribute("all");
    //1、设定每一页的记录数
    int pageSize=3;
    //2、计算总的记录数
    int size = all.size();
    //3、分页总数
//    int i1 = size/ pageSize;
    int i1=(size% pageSize==0?(size/ pageSize):(size/ pageSize+1));
    //4、初始化当前页
    int curage = 1;
    if (request.getParameter("curage") == null) {
        curage = 1;
    } else {
        curage= Integer.valueOf(request.getParameter("curage"));
    }
    int offset = (curage - 1) * pageSize; // 计算偏移量
//    int limit = pageSize; // 限制数量
    //构建sql语句查询当前页的记录数
//    String sql="select * from stu limit "+offset+", "+limit;
    //6、获取当前页数据
    List<user> findye = userDao.findye(offset,pageSize);
%>
<div class='container'>
    <h1>学生信息管理</h1>

    <div><a href='insertStudent.jsp'>添加信息</a></div>
    <table>
        <tr><th>id</th><th>姓名</th><th>性别</th><th>年龄</th><th>操作一</th><th>操作二</th></tr>
        <%
            for (int i = 0; i <findye.size() ; i++) {
        %>
        <tr>
            <td><%=findye.get(i).getID()%></td>
            <td><%=findye.get(i).getName()%></td>
            <td><%=findye.get(i).getSex()%></td>
            <td><%=findye.get(i).getAge()%></td>
            <td><a onclick=if(confirm('确定删除吗？'))return true; return false; href=delok?id=<%=findye.get(i).getID()%>>删除</a></td>
            <td><a href=update.jsp?id=<%=findye.get(i).getID()%>>更新</a></td>
            <%--            <a onclick=\"if(confirm('确定删除吗？')) return true; return false;\" href=delone?id="+findye.get(i).getId()+">删除</a>--%>
        </tr>
        <%
            }
        %>
    </table>
    <%
        if(curage==1){
    %>
    <span>首页</span>
    <span>上一页</span>
    <a href="shoulist2.jsp?curage=<%=curage+1%>">下一页</a>
    <a href="shoulist2.jsp?curage=<%=i1%>">尾页</a>
    <%
        }else if (curage==i1){
    %>
    <a href="shoulist2.jsp?curage=1">首页</a>
    <a href="shoulist2.jsp?curage=<%=curage-1%>">上一页</a>
    <span>下一页</span>
    <span>尾页</span>
    <%
    }else{
    %>
    <a href="shoulist2.jsp?curage=1">首页</a>
    <a href="shoulist2.jsp?curage=<%=curage-1%>">上一页</a>
    <a href="shoulist2.jsp?curage=<%=curage+1%>">下一页</a>
    <a href="shoulist2.jsp?curage=<%=i1%>">尾页</a>
    <%
        }
    %>
</div>
</body>
</html>

界面展示：

原文链接: https://blog.csdn.net/daibadetianshi/article/details/140830940

一、写界面框架：

二、写分页逻辑：

当前页面的展示：

下一页展示：

跳转按钮的：

Spring 实现 3 种异步接口 2024-10-18 09:07

重学SpringBoot3-集成Redis（五）之布隆过滤器 2024-10-08 11:24

SpringBoot整合异步任务执行 2024-10-08 11:24

springboot kafka多数据源，通过配置动态加载发送者和消费者 2024-10-08 11:24

SpringBoot 集成 Redis 2024-10-08 11:24

SpringBoot整合QQ邮箱 2024-10-08 11:24

目录