【分页】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

 @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

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-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();
	    },
	},

效果：