实现分页查询

分页查询

  • 分页查询语句
  • 项目中添加分页功能
    • 按钮设置
    • 前后端代码
    • 功能实现

分页查询语句

限制查询的 sql 语句:

select * from student limit 0,4

sql 查询结果如下:

在这里插入图片描述

分页查询的每一页都对应一行 sql 语句,若每一行都写单独对应的 sql 语句不仅重复量大而且还需要人工计算页数,不能灵活调整非常不方便,因此我们需要对分页查询的 sql 语句进行归纳总结:

其中 page 表示当前页码, pageSize 表示一页的大小

select * from student limit (page-1),pageSize

这样只需要传两个参数就可以动态进行分页查询

项目中添加分页功能

按钮设置

分页功能要有页码显示,我们需要在前端设置按钮样式:

在这里插入图片描述

在这里插入图片描述

效果图:

在这里插入图片描述

前后端代码

搜索操作需要搜索数据还需要搜索页码数值,搜索数据和搜索页码都需要 page 和 pageSize 值,所以我们可以在 js 文件中直接先将 page 和 pageSize 设置为全局变量传给后端,如图:

在这里插入图片描述

分页查询的加载数据函数:

在这里插入图片描述

分页查询的加载页码函数:
注意这里加载页码函数没写完,因为我们不知道具体是几页,需要后端给返回值再进行添加

在这里插入图片描述

我们可以将排序和分页代码进行 sql 继续拼接,但是要注意数据传到后端是字符串形式,字符串不能进行数字运算,Integer.parseInt()方法可以将数字形字符串返回为int类型的数据

sql+=" order by id limit "+(Integer.parseInt(page)-1)*Integer.parseInt(pageSize)+","+pageSize;

搜索的加载数据和加载页码条件需要保持一致同步,所以这两个两个文件代码内容类似,代码如下:

在这里插入图片描述
搜索数据功能(IndexServlet.java)返回的的是需要所有数据的对象,搜索页码功能(GetCount.java)返回的是数量

加载页码虽然返回的是数量但是它是以 json 的形式返回的数据,打印返回值value如下:

在这里插入图片描述

value.num 才可以获取到具体的数量值,Math.ceil() 是 js 中的方法表示向上取整,这样就可以得到页码数量:

Math.ceil(value.num/pageSize)

完整加载页码函数:

在这里插入图片描述

功能实现

进入页面的时候以及点击搜索之后都需要知道页码数量,所以都需要调函数
这里点击搜索功能设置 page = 1 是因为我们需要从结果的 第一页展示 此外还有 page 重置 的作用

在这里插入图片描述

任意页码切换
数据和样式都需要切换,在HTML中我们将class值为 current 的添加了加深样式,那么样式切换只需要动态地将其他的兄弟节点的current class值删掉仅保留该节点的current class值就可以了

在这里插入图片描述

首页尾页切换
其中首页切换中 $(".item").eq(0) 中 .eq(i) 表示从匹配的元素集合中选取索引为 i 的元素(索引从 0 开始),也可以使用 $(".item").first()
如何进行尾页切换,元素有几个 item 属性值那么就有几页,所以找页码数量可以用统计 item 属性个数的方式

在这里插入图片描述

上一页下一页切换
注意:item 的索引是 page-1,当到第一页时不能再点上一页了,当到最后一页时不能再点下一页了

在这里插入图片描述

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

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

相关文章

[QOI] qoi_desc | qoi_encode | qoi_decode

链接:https://phoboslab.org/log/2021/11/qoi-fast-lossless-image-compression (看代码设计的时候,真的大为震撼,伟大的algorithm T.T) docs:QOI图像格式 qoi项目提出了Quite OK Image(QOI&am…

智慧城轨可视化:一屏智管全城

图扑智慧城轨可视化系统,把地铁线路、车站、列车都搬进三维画面。列车晚点预警、站台拥挤提示、设备故障定位…… 这些关键信息一屏聚合,调度员能快速调整发车频次,疏导高峰客流。遇上突发情况,系统联动应急方案,同步显…

包新的Git安装与使用教程(2024九月更新)

目录 一、安装git 1.下载git 2.git安装 3.环境变量配置与测试 二、使用教程 1.创建版本库 2.版本回退 3.删除和恢复文件 一、安装git 1.下载git 官方下载地址:https://git-scm.com/download 然后进入以下页面,点击下载链接即可(windows一般都是…

中望3D 2026亮点速递(1)-全新槽功能螺纹功能,减少繁琐操作

本文为CAD芯智库整理,未经允许请勿复制、转载!中望3D 2026全新的槽功能,包括:(1)可快速生成多种槽形;(2)快速生成一个或多个槽;(3)支持…

2025毫米波雷达技术白皮书:智能汽车与物联网的感知核心

随着人工智能、物联网(IoT)和智能汽车产业的迅猛发展,毫米波雷达技术正成为感知领域的核心驱动力。毫米波雷达凭借其高精度、全天候和强抗干扰能力,广泛应用于智能汽车的自动驾驶、物联网的环境感知以及工业自动化。2025年&#x…

用 React-Three-Fiber 实现雪花下落与堆积效果:从零开始的 3D 雪景模拟

在 Web3D 开发中,自然现象模拟一直是极具吸引力的主题。本文将基于 React-Three-Fiber(R3F)框架,详解如何实现一个包含雪花下落、地面堆积的完整雪景效果。我们会从基础粒子系统入手,逐步完善物理交互逻辑,…

从抓包GitHub Copilot认证请求,认识OAuth 2.0技术

引言 在现代开发工具中,GitHub Copilot 以智能、嵌入式的人工智能代码补全能力著称。作为一项涉及用户敏感数据和付费授权的服务,其认证授权流程尤为值得技术研究。本文基于实际抓包 VS Code 中的 Copilot 登录认证请求,系统梳理其 OAuth 2.…

Linux操作系统之线程:分页式存储管理

目录 前言: 一、分页式存储管理 二、二级页表的地址转化 三、缺页中断 总结 前言: 我们上篇文章简单介绍了线程的一些知识点,但是还有很多坑没有给大家填上,包括页表部分我们还没为大家说明。 本篇文章我将会继续为大家讲解…

xss1-8

Level-1<script>alert()</script>基础反射型 无任何过滤Level-2"> <script>alert()</script> <"闭合属性&#xff1a;">用来闭合当前标签的value属性注入新标签&#xff1a;闭合属性后&#xff0c;插入独立的<script>…

51c嵌入式~单片机~合集1

自己的原文哦~ https://blog.51cto.com/whaosoft/11897656 一、STM32的启动模式配置与应用 三种BOOT模式 所谓启动&#xff0c;一般来说就是指我们下好程序后&#xff0c;重启芯片时&#xff0c;SYSCLK的第4个上升沿&#xff0c;BOOT引脚的值将被锁存。用户可以通过设…

Typecho分类导航栏开发指南:从基础到高级实现

文章目录 Typecho分类导航栏深度解析:父分类与子分类的完美呈现 引言 一、Typecho分类系统基础 1.1 Typecho分类结构 1.2 获取分类数据的基本方法 二、基础分类导航输出 2.1 简单的平铺式导航 2.2 带计数器的分类导航 三、层级分类导航实现 3.1 递归输出父子分类 3.2 使用Type…

C++异步编程工具 async promise-future packaged_task等

深入探讨 C11 中引入的四个核心异步编程工具&#xff1a;std::async, std::future, std::promise, 和 std::packaged_task。它们共同构成了 C 现代并发编程的基础。 为了更好地理解&#xff0c;我们可以使用一个餐厅点餐的类比&#xff1a; std::future (取餐凭证)&#xff1…

Linux-网络管理

网络管理1. 网络基础1.1 TCP/IP 协议栈&#xff08;四层模型&#xff09;1.2 网络设备配置与基础概念1.3 网络接口命名规则1.4 网络配置文件位置2. 常用网络配置命令2.1 查看网络接口信息2.2 配置 IP 地址2.3 启用/禁用网卡2.4 修改网卡 MAC 地址2.5 配置网卡的 MTU&#xff08…

Linux锁的概念及线程同步

目录 1.常见锁概念 死锁 死锁四个必要条件 避免死锁 避免死锁算法 2. Linux线程同步 条件变量 同步概念与竞态条件 条件变量函数 初始化 销毁 等待条件满足 唤醒等待 简单案例&#xff1a; 条件变量使用规范 1.常见锁概念 死锁 死锁是指在一组进程中的各个进程均占有不会释放的…

docker更换国内加速器-更换华为加速器2025-717亲测可用docker 拉取镜像出错

[rootlocalhost ~]# docker pull nginx Using default tag: latest Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers)报错原因就是…

Unity VR多人手术模拟恢复2:客户端移动同步问题分析与解决方案

Unity VR多人手术模拟恢复2&#xff1a;客户端移动同步问题分析与解决方案 &#x1f3af; 问题背景 在开发基于Unity Mirror网络架构的VR多人手术模拟系统时&#xff0c;我们遇到了一个复杂的客户端移动同步问题&#xff1a; 主要操作者&#xff08;第一个客户端&#xff09;&a…

uni-app开发的页面跳转全局加载中

uni-app开发的页面跳转全局加载中首先需要下载插件创建加载中页面组件app.vue页面中监听跳转首先需要下载插件 https://ext.dcloud.net.cn/plugin?id20613 创建加载中页面组件 <!-- 全局自定义加载中 --> <template><view v-if"visible" class&qu…

XXE漏洞4-XXE无回显文件读取-PentesterLab靶场搭建

一.PentesterLab靶场搭建(实验环境搭建)介绍&#xff1a;PentesterLab 是一个全面的漏洞演示平台&#xff0c;但是它是收费的&#xff0c;我们这里只使用它的 xxe 演示案例。安装 PentesterLab 虚拟机:下载好镜像&#xff1a; 1.打开VMware新建虚拟机&#xff0c;选择典型就行。…

【机器学习】图片分类中增强常用方式详解以及效果展示

图片增强常用方式详解 引言 图片数据的质量和多样性对模型的训练效果起着至关重要的作用。然而&#xff0c;实际获取的图片数据往往存在数量不足、分布不均衡等问题。图片增强技术应运而生&#xff0c;它通过对原始图片进行一系列变换&#xff0c;生成更多具有多样性的图片&…

【URL 转换为PDF】HTML转换为PDF

1、方法1 pdfkit 安装依赖 # 安装 wkhtmltopdf&#xff08;系统级&#xff09; # Ubuntu/Debian sudo apt install wkhtmltopdf# macOS brew install wkhtmltopdf# Windows 下载安装&#xff1a;https://wkhtmltopdf.org/downloads.html# 安装 Python 库 pip install pdfkitimp…