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

后端:

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

1、分页工具实体

java 复制代码
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、列表请求对象实体:

java 复制代码
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

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

Service

java 复制代码
 PageResult<EquipmentCategoryVo> list(EquipmentCategoryRequest request);

ServiceImpl

java 复制代码
 @Override
    public 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

java 复制代码
List<EquipmentCategoryVo> list(@Param("request") EquipmentCategoryRequest request);

前端:

前端使用实现分页vue2

链接: 饿了么UI

1、api/xxx/xxx.js 中

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

2、view/xxx/xxx.vue 中

javascript 复制代码
<template>
	<div>
	 <label for="category-name" style="margin-left: 20px">类目名称:</label>
      <el-input
        id="category-name"
        type="text"
        placeholder="请输入名称"
        v-model="searchForm.equipmentCategoryName"
        clearable
        style="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();
	    },
	},

效果:


相关推荐
NiNg_1_2343 分钟前
SpringBoot整合SpringSecurity实现密码加密解密、登录认证退出功能
java·spring boot·后端
种树人202408196 分钟前
如何在 Spring Boot 中启用定时任务
spring boot
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
苹果醋33 小时前
Java8->Java19的初步探索
java·运维·spring boot·mysql·nginx
Wx-bishekaifayuan3 小时前
django电商易购系统-计算机设计毕业源码61059
java·spring boot·spring·spring cloud·django·sqlite·guava
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf3 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据3 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫