分页实现
百度已收录

一、分页后端实现逻辑

 

    分页实现依赖于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
}

最终实现分页效果: