springboot + elementui 实现分页功能

拼搏现实的明天。 2023-01-09 01:08 202阅读 0赞

### 目录 ###

*  后端
 *  前端

# 后端 #

// num为当前页 size为每页个数
        public Page<codesection> pageAll(int num, int size) { 
        //第一部分 实现分页查询
            Pageable pageable = PageRequest.of(num,size);
            Page<codesection> codesections = codesectionDao.findAll(pageable);
            //第二部分 将page 转成list 添加数据
            List<codesection> codesectionslist = codesections.getContent();
            for (int i = 0; i < codesectionslist.size(); i++) { 
                codesectionslist.get(i).setFactoryname(factoryinfoDao.findByFactoryid(codesectionslist.get(i).getFactoryid()).getFactoryname());
                codesectionslist.get(i).setLinename(lineinfoDao.findByLineid(codesectionslist.get(i).getLineid()).getLinename());
            }
            //第三部分将 list 转成 page 并返回
            // 当前页第一条数据在List中的位置
            int start = 0;
            // 当前页最后一条数据在List中的位置
            int end = codesectionslist.size();
            // 配置分页数据
            Page<codesection> klassPage = new PageImpl<codesection>(codesectionslist.subList(start, end), pageable, codesections.getTotalElements());
            return klassPage;
        }

# 前端 #

data() { 
       return { 
         query:{ 
           pageIndex:0,
           pageSize:9,
         },
         pageTotal: 0,
       }
     },
    created() { 
      this.getData(this.query.pageIndex,this.query.pageSize)
    },
    getData(currentPage,pageSize){ 
      this.axios({ 
        method:'GET',
        url:'/page/'+currentPage+'/'+pageSize,
      })
        .then(res =>{ 
          console.log(res)
          this.codes = res.data.content;
          this.pageTotal = res.data.totalElements;
        })
    },
    handleCurrentChange(value){ 
      this.query.pageIndex = value;//获得当前页码
      this.getData(this.query.pageIndex-1,this.query.pageSize);
    }