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

效果:


相关推荐
弗拉唐17 分钟前
springBoot,mp,ssm整合案例
java·spring boot·mybatis
2401_857610031 小时前
SpringBoot社团管理:安全与维护
spring boot·后端·安全
凌冰_2 小时前
IDEA2023 SpringBoot整合MyBatis(三)
spring boot·后端·mybatis
天天进步20152 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
乌啼霜满天2493 小时前
Spring 与 Spring MVC 与 Spring Boot三者之间的区别与联系
java·spring boot·spring·mvc
tangliang_cn3 小时前
java入门 自定义springboot starter
java·开发语言·spring boot
疯狂的沙粒3 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
Grey_fantasy3 小时前
高级编程之结构化代码
java·spring boot·spring cloud