JSP分页写法

news2025/1/15 22:34:39

一、写界面框架:

<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>
    <%
        }
    %>

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

跳转按钮应该和上面的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>

 界面展示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1968261.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

log4j2漏洞练习

log4j2 是Apache的一个java日志框架&#xff0c;我们借助它进行日志相关操作管理&#xff0c;然而在2021年末log4j2爆出了远程代码执行漏洞&#xff0c;属于严重等级的漏洞。apache log4j通过定义每一条日志信息的级别能够更加细致地控制日志生成地过程&#xff0c;受影响的版本…

C++·哈希

1. unordered系列关联式容器 在C98中&#xff0c;STL提供了底层为红黑树结构的一系列关联式容器&#xff0c;在查询时效率可达到logN。后来在C11中STL又提供了4个unordered系列的关联式容器&#xff0c;这四个容器与红黑树结构的使用方法类似&#xff0c;但是底层结构不同&…

【C++】类和对象——Lesson2

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C &#x1f680;本系列文章为个人学习笔记…

最全架构学习路线图,海量大厂架构案例

很多读者经常抱怨&#xff0c;工作中涉及不到太多架构设计&#xff0c;对于架构的理解少之又少。 零散地做过一些架构工作&#xff0c;但完全不知道架构设计的全流程是怎样的。 想要成长为架构师&#xff0c;缺乏系统的方法论指导。 无论是程序员&#xff0c;还是产品经理&a…

数字图像边缘曲率计算及特殊点检测

一、曲率和数字图像边缘曲率检测常用方法简介 边缘曲率作为图像边缘特征的重要参数&#xff0c;不仅反映了边缘的几何形状信息&#xff0c;还对于图像识别、图像分割、目标跟踪等任务具有显著影响。 曲线的曲率&#xff08;curvature&#xff09;就是针对曲线上某个点的切线方向…

只有4%知道的Linux,看了你也能上手Ubuntu桌面系统,Ubuntu简易设置,源更新,root密码,远程服务...

创作不易 只因热爱!! 热衷分享&#xff0c;一起成长! “你的鼓励就是我努力付出的动力” 最近常提的一句话&#xff0c;那就是“但行好事&#xff0c;莫问前程"! 与辉同行的董工说​&#xff1a;​守正出奇。坚持分享&#xff0c;坚持付出&#xff0c;坚持奉献&#xff0c…

患者特征对AI算法在解释阴性筛查数字乳腺断层摄影研究中的表现的影响| 文献速递-AI辅助的放射影像疾病诊断

Title 题目 Patient Characteristics Impact Performance of AI Algorithm in Interpreting Negative Screening Digital Breast Tomosynthesis Studies 患者特征对AI算法在解释阴性筛查数字乳腺断层摄影研究中的表现的影响 Background 背景 Artificial intelligence (AI)…

什么是云边协同?

当今信息技术高速发展的时代&#xff0c;"云边协同"&#xff08;Edge Cloud Collaboration&#xff09;已经成为一个备受关注的话题。它涉及到云计算和边缘计算的结合&#xff0c;为数据处理、存储和应用提供了全新的可能性。本文将介绍云边协同的概念、优势以及在不…

Learning vtkjs之LookUpTable

颜色映射表 LookUpTable 介绍 先看官方的介绍&#xff1a; vtkLookupTable is a 2D widget for manipulating a marker prop vtkLookupTable 是一个用于操纵标记属性的2维的小部件。 一般可以用来进行颜色刻度的显示。它会帮我们进行颜色线性插值计算 代码效果 其实设置一个…

C++必修:STL之vector的了解与使用

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C学习 贝蒂的主页&#xff1a;Betty’s blog 1. C/C中的数组 1.1. C语言中的数组 在 C 语言中&#xff0c;数组是一组相同类型…

顺序消费rocketMQ(FIFO先进先出)和小技巧 取模运算的周期性特征来将数据分组。

20240801 一、顺序消费MQ&#xff08;FIFO先进先出&#xff09;介绍 二、一个小技巧&#xff0c;对于取模运算&#xff0c;用来在几以前进行随机选取&#xff0c;取模运算的周期性特征来将数据分组&#xff0c;使用场景对于取模会重复问题 一、顺序消费MQ&#xff08;FIFO先进先…

openeuler下载docker

https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/rhel/9/x86_64/stable/ #清华的网址 https://mirrors.aliyun.com/docker-ce/linux/rhel/9/x86_64/stable/ #阿里云的网址 开始配置 vim /etc/yum.repos.d/docker-ce.repo #写仓库&#xff0c;我这里…

【初阶数据结构篇】归并排序和计数排序(总结篇)

文章目录 归并排序和计数排序前言代码位置归并排序计数排序排序性能比较排序算法复杂度及稳定性分析 归并排序和计数排序 前言 本篇以排升序为例 代码位置 gitee 前篇&#xff1a;【初阶数据结构篇】冒泡排序和快速排序 中篇&#xff1a;【初阶数据结构篇】插入、希尔、选择…

【Qt】QDateTimeEdit

在Qt中&#xff0c;QDateEdit是用于选择日期的微调框&#xff0c;QTimeEdit是用于选择小时和分钟的微调框 QDateTimeEdit则是基于QDateEdit和QTimeEdit的组合控件&#xff0c;能够同时显示日期和时间&#xff0c;并允许用户以交互方式编辑日期 常用属性 属性说明dateTime时间…

electron-updater实现electron全量更新和增量更新——渲染进程UI部分

同学们可以私信我加入学习群&#xff01; 正文开始 前言更新功能所有文章汇总一、两个同心球效果实现二、球内进度条、logo、粒子元素实现2.1 球内包含几个元素&#xff1a;2.2 随机粒子生成方法generateRandomPoint2.3 创建多个粒子的方法createParticle 三、gsap创建路径动画…

基于python的百度迁徙迁入、迁出数据分析(六)

书接上回&#xff0c;苏州市我选取了2024年5月1日——5月5日迁入、迁出城市前20名并求了均值&#xff0c;从数据中可以看出苏州市与上海市的关系还是很铁的&#xff0c;都互为对方的迁入、迁出的首选且迁徙比例也接近4分之一&#xff0c;名副其实的老铁了&#xff1b; 迁出城市…

Seurat-SCTransform与harmony整合学习续(亚群分析)

目录 提取细胞亚群 SCTransform-harmony技术路线 ①亚群SCTransform标准化 ②harmony去批次 这里对上一章的内容进行补充&#xff1a; Seurat-SCTransform与harmony整合学习-CSDN博客 提取细胞亚群 rm(list ls()) library(Seurat)#好像先后需要先后加载 library(patchw…

【Jenkins】在linux上通过Jenkins编译gitee项目

因项目需求近期在linux服务器上部署了Jenkins来自动编译gitee上的项目源码&#xff0c;期间踩到了一些坑&#xff0c;花费了不少时间来处理&#xff0c;特此记录。 所需资源下载列表&#xff1a; Jenkins &#xff1a;https://mirrors.tuna.tsinghua.edu.cn/jenkins/war/2.46…

文件系统 --- 重定向,缓冲区

序言 本篇文章的内容和上一篇文章 &#x1f449;点击查看 紧密相连&#xff0c;所以为了更好的理解本篇文章&#xff0c;需要大家将前置知识准备好哦&#x1f607;。  本文主要向大家介绍文件的重定向&#xff0c;以及基于用户级别的缓冲区和基于操作系统级别的缓冲区。原来看…