分页实现

百度已收录

---

一、分页后端实现逻辑

 

    分页实现依赖于mybatisplus框架，后端代码开发只需要实现Controller方法即可，业务代码无需单独实现Service、Mapper，直接调用mybatisplus框架中的方法即可。以职务管理模块为例，Controller中分页方法的实现如下：

@GetMapping(value = "/list")
@AutoLog(value = "职务管理-分页查询")
public HttpResult<?> queryPageList(SysPosition sysPosition,
                                       @RequestParam(name="pageNo", defaultValue="1") Integer pageNo,
                                       @RequestParam(name="pageSize", defaultValue="10") Integer pageSize,
                                       HttpServletRequest req) {
   QueryWrapper<SysPosition> queryWrapper = QueryBuilder.initQueryWrapper(sysPosition, req.getParameterMap());
   Page<SysPosition> page = new Page<SysPosition>(pageNo, pageSize);
   IPage<SysPosition> list = sysPositionService.page(page, queryWrapper);
   return HttpResult.ok(list);
}

（1）输入参数sysPosition为查询条件，pageNo是查询页码，pageSize每页记录数，req为请求对象。

（2）QueryBuilder.initQueryWrapper(sysPosition, req.getParameterMap())是构造mybatisplus查询条件；

（3）new Page<SysPosition>(pageNo, pageSize)是构成mybatisplus分页对象；

（4）sysPositionService.page(page, queryWrapper)执行分页查询，调用的是mybatisplus框架里的方法，无需单独实现；

（5）return HttpResult.ok(list)返回分页结果集。

 

二、分页前端调用实现

 

前端表格分页使用and-design-vue中的a-table组件，给分页属性:pagination赋值即可

<a-table
  ref="table"
  size="middle"
  bordered
  rowKey="id"
  :columns="columns"
  :dataSource="dataSource"
  :pagination="ipagination"
  :loading="loading"
  :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
  @change="handleTableChange">
</a-table>

云程平台对ipagination对象进行了统一封装，业务上无需单独实现，直接引用即可。如果前端组件采用的不是and-design-vue的a-table，参考如下的分页对象，自行实现即可。

ipagination: {
  current: 1,
  pageSize: 10,
  pageSizeOptions: ['10', '20', '30'],
  showTotal: (total, range) => {
    return range[0] + '-' + range[1] + ' 共' + total + '条'
  },
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0
}

最终实现分页效果：