分页

后台项目

controller

int int

import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;

一个第几页 一个是页大小 多少条

@ApiOperation("故障报修统计")
    @GetMapping(value = "/getFaultrepairStatistics", produces = {"application/json;charset=UTF-8"})
    public ControllerResult<?> getFaultrepairStatistics(@RequestParam(value = "pageindex",defaultValue = "1") int pageIndex,@RequestParam(value = "pagesize",defaultValue = "10") int pageSize){
        try {
            Page<FaultrepairStatistics> list = constructionStatisticsService.getFaultrepairStatistics(pageIndex,pageSize);
            return new ControllerResult<>(true, list, list.getTotal());
        } catch (Exception e) {
            e.printStackTrace();
            return new ControllerResult<>(false, ErrorCode.SYSTEM_EXCEPTION);
        }

    }

serverimpl

    @Override
    public Page<FaultrepairStatistics> getFaultrepairStatistics(int pageIndex, int pageSize) {
        PageHelper.startPage(pageIndex,pageSize);
        return constructionStatisticsDao.getFaultrepairStatistics();
    }

mapper

    /**
     * 专项检查 分页查询
     * @return 列表对象
     */
    Page<SpecialInspectionDTO> getFaultrepairStatistics();

或者 PageInfo<TbItem> pageInfo = new PageInfo<TbItem>(list);

dao 层的话 全查就可以 不用调用mabatis自动添加分页

count 查分页后多少页码

getTotal 一共多少条

@JsonInclude(JsonInclude.Include.NON_NULL)

实体类注解 属性为null 不显示 不实例化

前端分页

<el-pagination style="text-align: center" layout="prev, pager, next" :total="Page.total" :page-size="Page.pageSize" @current-change="handleCurrentChange" />


Page: { pageSize: 10, total: 0, pageIndex: 1 }

elementPagination 分页

          <div slot="footer" style="height: 30px;width: 100%" >
            <el-pagination
            @size-change="handleSizeChange" //钩子检测page-sizes选择的第几个
            @current-change="handleCurrentChange" // currentPage 检测当前是第几页(必须)
            :current-page=page.currentPage    //当前页码
            :page-sizes=page.pageSizes		//选择一页几个
            :page-size=page.pageSize(必须)		//一个几个
            layout="total, sizes, prev, pager, next, jumper"  //显示样式
            :total=page.total(必须)
                           >           // 总数量
          </el-pagination>
          </div>



page: {
        pageSize: 10, // 每页显示的行数
        total: null, // 总数
        currentPage: 1, // 当前页码
        pageSizes: [10, 20, 30, 50]
      },




    handleSizeChange(val) {
      this.page.pageSize = val
      console.log(`每页 ${this.page.pageSize} 条`)
      this.getConstructionCard()
    },
	// 下一页
    handleCurrentChange(val) {
		//修改查询条件 pageindex
      this.page.currentPage = val
      console.log(`当前页: ${this.page.currentPage}`)
      this.getConstructionCard()
    },