【分页】Spring Boot 列表分页 + javaScript前台展示

后端:

准备好查询实体与分页实体

1、分页工具实体

package com.ruoyi.dms.config;import com.alibaba.nacos.api.model.v2.Result;
import lombok.Data;import java.io.Serializable;
import java.util.List;/*** @author 宁兴星* @description: 列表返回结果集*/
@Data
public class PageResult<T> implements Serializable {/*** 总条数*/private long total;/*** 结果集合*/private List<T> list;public PageResult() {}public PageResult(long total, List<T> list) {this.total = total;this.list = list;}public static <T> PageResult<T> toPageResult(long total, List<T> list){return new PageResult(total , list);}public static <T> Result<PageResult<T>> toResult(long total, List<T> list){return Result.success(PageResult.toPageResult(total,list));}
}

2、列表请求对象实体:

package com.ruoyi.dms.domain.req;import lombok.Data;/*** @author: 宁兴星* Date: 2024/9/28 10:29* Description:*/
@Data
public class EquipmentCategoryRequest {/*** 设备类目名称*/private String equipmentCategoryName;/*** 是否启用*/private Integer status;/*** 分页参数*/private Integer pageNum;/*** 每页条数*/private Integer pageSize;
}

Controller

 /*** 设备类目管理列表*/@GetMapping("/ec/list")public R<PageResult<EquipmentCategoryVo>> list(EquipmentCategoryRequest request){PageResult<EquipmentCategoryVo> list = ecService.list(request);return R.ok(list);}

Service

 PageResult<EquipmentCategoryVo> list(EquipmentCategoryRequest request);

ServiceImpl

 @Overridepublic PageResult<EquipmentCategoryVo> list(EquipmentCategoryRequest request) {// 分页PageHelper.startPage(request.getPageNum(), request.getPageSize());// 查询List<EquipmentCategoryVo> list = ecMapper.list(request);// 封装分页信息PageInfo<EquipmentCategoryVo> pageInfo = new PageInfo<EquipmentCategoryVo>(list);// 返回分页结果return PageResult.toPageResult(pageInfo.getTotal(), pageInfo.getList());}

Mapper

List<EquipmentCategoryVo> list(@Param("request") EquipmentCategoryRequest request);

前端:

前端使用实现分页vue2

链接: 饿了么UI

1、api/xxx/xxx.js 中

export function esList(equipmentCategoryRequest) {return request({url: '/dms/ec/list' ,method: 'get',params: equipmentCategoryRequest,})
}

2、view/xxx/xxx.vue 中

<template><div><label for="category-name" style="margin-left: 20px">类目名称:</label><el-inputid="category-name"type="text"placeholder="请输入名称"v-model="searchForm.equipmentCategoryName"clearablestyle="width: 200px;margin-bottom: 20px;margin-right: 10px "/><label for="category-name">状态:</label><el-select v-model="searchForm.status" placeholder="请选择状态" style="width: 200px; margin-right: 10px" clearable><el-option label="停用" value="0"></el-option><el-option label="启用" value="1"></el-option></el-select>
<!--      搜索按钮--><el-button @click="esList"style="color: #1482f0"class="el-icon-search">搜索</el-button><div class="block" style="margin-top: 10%;text-align: center;"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="searchForm.pageNum":page-sizes="[3, 5, 10, 30]":page-size="searchForm.pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div></div>
</template>
........data() {return {searchForm: {pageNum: 1,pageSize: 3,},total: 0,}},methods: {//列表esList(){esList(this.searchForm).then(response => {this.equipmentCaTableData = response.data.list;this.total = response.data.total;})},handleSizeChange(val) {this.searchForm.pageSize = val;this.esList();},handleCurrentChange(val) {this.searchForm.pageNum = val;this.esList();},},

效果:

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

【10】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-泛型基础全解(泛型函数、泛型接口、泛型类)及参数、接口补充

序言&#xff1a; 本文详细讲解了关于ArkTs语言中的泛型&#xff0c;其中包含泛型函数、泛型接口、泛型约束、泛型类及其中参数的使用方法&#xff0c;补充了一部分接口相关的知识&#xff0c;包括接口的继承和具体实现&#xff0c;也写到了一些边边角角的小知识&#xff0c;剩…

详细介绍:API 和 SPI 的区别

文章目录 Java SPI (Service Provider Interface) 和 API (Application Programming Interface) 的区别详解目录1. 定义和目的1.1 API (Application Programming Interface)1.2 SPI (Service Provider Interface) 2. 使用场景2.1 API 的应用场景2.2 SPI 的应用场景 3. 加载和调…

jmeter学习(1)线程组与发送请求

1、线程组 执行顺序 &#xff1a;setUp线程组 > 线程组 > tearDown线程组 2、 发送请求 可以发送http、java、dubbo 请求等 下面讲解发送http 1&#xff09;Http请求默认值 作用范围是该线程组下的所有HTTP请求&#xff0c;如果http请求设置的与默认值冲突&#xff0…

PC端微信小程序如何调试?

向往常一样运行开微信小程序开发者工具 如果只弹出pc端小程序&#xff0c;没有出现调试的界面&#xff1a;点击胶囊按钮的三个…选择重新进入小程序 即可依次展开相应的功能调试&#xff0c;改完代码没反应再刷新看看&#xff0c;再没反应就再次重新点击编译并自动调试。

【学习笔记】手写 Tomcat 六

目录 一、线程池 1. 构建线程池的类 2. 创建任务 3. 执行任务 测试 二、URL编码 解决方案 测试 三、如何接收客户端发送的全部信息 解决方案 测试 四、作业 1. 了解工厂模式 2. 了解反射技术 一、线程池 昨天使用了数据库连接池&#xff0c;我们了解了连接池的优…

DSPy101

DSPy 介绍 DSPy&#xff08;Declarative Self-improved Language Programs in Python&#xff09; 是一个用于系统化和增强在流水线内使用语言模型的框架&#xff0c;它通过数据驱动和意图驱动的系统来优化大型语言模型&#xff08;LLM&#xff09;的使用。 DSPy 的核心是模块…

C语言的内存结构

在电脑中C语言编译器也像其他软件一样占用一块内存空间。 为了更好的利用好这块内存&#xff0c;C语言将他们分为 在C语言中&#xff0c;变量定义的位置不一样&#xff0c;那么在内存中所处的位置也是不一样的。&#xff08;变量在函数内部是存储在栈里&#xff0c;而在函数外部…

闯关训练三:Git 基础知识

任务1: 破冰活动&#xff1a;自我介绍 点击Fork目标项目&#xff0c;创建一个新的Fork 获取仓库链接 在连接好开发机的vscode终端中逐行执行以下代码&#xff1a; git clone https://github.com/KelvinIII/Tutorial.git # 修改为自己frok的仓库 cd Tutorial/ git branch -a g…

Star 3w+,向更安全、更泛化、更云原生的 Nacos3.0 演进

作者&#xff1a;席翁 Nacos 社区刚刚迎来了 Star 突破 30000 的里程碑&#xff0c;从此迈上了一个新的阶段。感谢大家的一路支持、信任和帮助&#xff01; Nacos /nɑ:kəʊs/是 Dynamic Naming and Configuration Service 的首字母简称&#xff0c;定位于一个更易于构建云原…

Android SystemUI组件(11)SystemUIVisibility解读

该系列文章总纲链接&#xff1a;专题分纲目录 Android SystemUI组件 本章关键点总结 & 说明&#xff1a; 说明&#xff1a;本章节持续迭代之前章节思维导图&#xff0c;主要关注左侧最上方SystemUiVisibility解读部分即可。 本章节主要讲解SystemUiVisibility的概念及其相…

LeetCode从入门到超凡(四)深入浅出理解贪心算法

引言 大家好&#xff0c;我是GISer Liu&#x1f601;&#xff0c;一名热爱AI技术的GIS开发者。本系列文章是我跟随DataWhale 2024年9月学习赛的LeetCode学习总结文档&#xff1b;本文主要讲解贪心算法。&#x1f495;&#x1f495;&#x1f60a; 介绍 贪心算法是一种经典的算法…

《中国电子报》报道: 安宝特AR为产线作业者的“秘密武器

近日&#xff0c;中国电子报在其文章《下一代工业智能终端重新定义制造业》中对安宝特的增强现实&#xff08;AR&#xff09;解决方案给予了高度评价&#xff0c;称其为产线作业者的“秘密武器”。这一创新技术改变了传统制造业的作业方式&#xff0c;使得操作人员能够在生产过…

Java中Map和Set详细介绍,哈希桶的实现

大家好呀&#xff0c;前一节我们接触了二叉搜索树&#xff0c;那么紧接着&#xff0c;我们要学习一种十分重要而且也是我们在初阶数据结构中接触的最后一种数据结构—Map和Set&#xff0c;本篇博客将会详细介绍两种数据结构&#xff0c;并且针对哈希表底层实现一个哈希桶&#…

从0到1深入浅出构建Nest.Js项目

Nest (NestJS) 是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的开发框架。它利用JavaScript 的渐进增强的能力&#xff0c;使用并完全支持 TypeScript &#xff08;仍然允许开发者使用纯 JavaScript 进行开发&#xff09;&#xff0c;并结合了 OOP &#xff08;面向对…

Java的学习(语法相关)

字符串存储的问题 char 和字符串都是字符的集合&#xff0c;它们之间的确有相似性&#xff0c;但在 Java 中它们有着不同的存储机制和处理方式。让我从 char 和 String 的本质区别入手来解释。 1. char 和 String 的区别 char 是基本类型&#xff1a;char 是 Java 中的基本数据…

Java-数据结构-Map和Set(三)-习题 o(´^`)o

目录 ❄️一、习题一(只出现一次的数字)&#xff1a; ❄️二、习题二(随机链表的复制)&#xff1a; ❄️三、习题三(宝石与石头)&#xff1a; ❄️四、习题四(旧键盘)&#xff1a; ❄️五、习题五(前k个高频单词)&#xff1a; ❄️总结&#xff1a; ❄️一、习题一(只出现一…

Python(三)——列表

文章目录 创建列表访问下标遍历列表元素新增元素查找元素删除元素连接列表切片操作 创建列表 创建列表主要有两种方式 [ ]表示一个空的列表 a [] print(type(a)) # <class list> print(a) # []通过list()的方式来创建一个空列表 a list() print(type(a)) # …

Java对象头

一、对象在堆内存中的布局 1.定义 在HotSpot虚拟机中&#xff0c;对象在堆内存的存储布局可以划分为三个部分&#xff1a;对象头&#xff08;Header&#xff09;、实例数据&#xff08;Instance Data&#xff09;、和对齐填充&#xff08;Paddin&#xff09;。 二、对象在堆内…

Rstudio:强大的R语言集成开发环境(IDE)

Rstudio 应该是 R 语言使用的标配&#xff0c;尽管 Rstudio 的母公司 Posit 推出了新一代的集成开发环境 Positron&#xff0c;但其还处于开发阶段。作为用户不妨让其成熟后再使用&#xff0c;现阶段还是 Rstudio 更稳定。 如果你在生物信息学或统计学领域工作&#xff0c;R语言…

【springboot】整合沙箱支付

目录 1. 配置沙箱应用环境2. 配置springboot项目1. 引入依赖2. 配置文件注册下载ngrok 3. 创建支付宝支付服务类4. 支付界面模板5. 控制类实现支付6. 测试 1. 配置沙箱应用环境 使用支付宝账号登录到开放平台控制台。 使用支付宝登录后&#xff0c;看到以下页面&#xff0c;下…