【分页】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();},},

效果：