描述
前面提到了项目做搜索的时候结合了分页,现在把分页简单总结下
效果
前端代码
data(){}里要初始化total(数据显示总数)、pageNo(当前页面)、size(每页条数)
<!-- 将后台获取到的数据以表格的形式展示 -->
<Card style="margin-top:10px;">
<Table stripe border :loading="loading" :columns="columns" :data="datalist"></Table>
</Card>
<!-- 分页 -->
<Card style="margin-top:10px;">
<Page
:total="total"
show-elevator
show-total
@on-change="goPage"
@on-page-size-change="sizeTo"
show-sizer
:page-size-opts="[10, 20, 50, 100]"
/>
</Card>
goPage(n) {
n = n || 1;
this.req.pageNo = n;
this.loading = true;
this.$global.get("report/list", this.req).then(res => {
if (res.success) {
this.datalist = res.data.list;
this.total = res.data.total;
this.loading = false;
} else {
this.$Message.error(res.errorMsg);
}
});
},
sizeTo(size) {
this.req.size = size;
this.goPage(this.req.pageNo);
}
后端代码
//Controller
@GetMapping("/list")
public ResponseInfo list(Integer pageNo, Integer size) {
return ResponseInfo.success(service.selectByPage(pageNo, size));
}
//Service
public PageInfo<Report> selectByPage(Integer pageNo, Integer size) {
if (null == pageNo)
pageNo = 1;
if (null == size)
size = 10;
ReportExample example = new ReportExample();
PageHelper.startPage(pageNo, size);
List<Report> list = mapper.selectByExample(example);
return new PageInfo<>(list);
}
分页maven依赖
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>${pagehelper.version}</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
<version>${pagehelper-spring-boot.version}</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>${pagehelper-spring-boot.version}</version>
</dependency>