后端分页+前端分页显示（Angular+Primeng+SpringBoot）

后端实现

引入PageHelper插件

<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.2.3</version>
</dependency>

添加PageModel实体类

@Data
@NoArgsConstructor
public class PageModel {private Integer pageNum;private Integer pageSize;
}

这里的两个注解需要引入lombok插件才可以使用

在mapper文件中添加对数据库操作的方法
```
  <select id="findByPaging" resultMap="BaseResultMap" parameterType="map">select * from PARM_FUND_INFO order by cast(id as integer ) desc</select>
```
**注意：**这里的by cast(id as integer)是因为我数据库的id字段是varchar类型，需要将其转换为integer才能进行排序
在dao层添加方法，调用上面的方法
```
Page<FundInfo> findByPaging();
```

在service层以及service的实现类调用dao层的方法

//service
Page<FundInfo> findByPage(Integer pageNum, Integer pageSize);
//serviceImpl
@Overridepublic Page<FundInfo> findByPage(Integer pageNum, Integer pageSize) {PageHelper.startPage(pageNum,pageSize);Page<FundInfo> data=fundInfoMapper.findByPaging();return data;}

**注意：**这里传入的pageNum是指要查询的页码，pageSize是指一页有多少条数据

controller层调用

@Autowiredprivate FundInfoService fundInfoService;
...@ApiOperation("分页测试")@PostMapping("/page")@CrossOriginpublic Result<List<FundInfo>> findByPaging(@RequestBody PageModel page) {int pageNum = page.getPageNum();int pageSize = page.getPageSize();Page<FundInfo> data = fundInfoService.findByPage(pageNum, pageSize);List<FundInfo> fundInfoList = data;Integer total = Math.toIntExact(data.getTotal());long startIndex = (pageNum - 1) * pageSize;if (total > startIndex) {return Result.buildResult(Result.Status.OK,fundInfoList,total);} else {return Result.buildResult(Result.Status.NOT_FOUND);}}

这里因为angular对后端发起http请求的时候需要以对象的形式传参，所以后端在接收数据的时候定义了一个PageModel实体来接收前端发来的数据

工具类Result可在我其他博客中找到，另外需要添加以下代码

private Integer total;public Integer getTotal() {return total;}public void setTotal(Integer total) {this.total = total;}
private Result(String status, String message, T data,Integer total) {this.status = status;this.message = message;this.data = data;this.total=total;}
public static <T> Result<T> buildResult(Status status, T data,Integer total) {return new Result<T>(status.getCode(),status.getReason(),data,total);
}

前端实现接收

由于我前端使用的是angular+primeng，所以可能对使用其他框架的朋友不太友好，这里主要也是提供一个思路。

在p-table中添加懒加载
由于在primeng中有分页器功能，即paginator，可以在p-table中设置[paginator]=true开启表的分页功能。如上所示的双向绑定的first便是页码(数值为0,10,20…)
在ts文件中定义并初始化以下数据
```
loading: boolean=true;
first: number = 0;
rows: number = 10;
totalRecords: number;
```
rows指的是table中一页有多少条内容，totalRecords则是一共有多少条内容。所以totalRecords/rows=一共有多少页，这这里不用我们做运算。赋值后table会自动计算。

定义懒加载的函数

//懒加载分页的数据loadFundInfos(event: LazyLoadEvent) {this.loading = true;setTimeout(() => {this.fundService.getPage(this.first + 10,this.rows).then(response => { this.totalRecords = response.total; this.infos = response.data })this.loading = false;}, 500)}

这里我调用服务，参数为：页码first+10,一页有多少条内容rows

服务对后端发起http请求

page={pageNum:0,pageSize:0
}
url = "http://localhost:8081/";
httpOptions = {headers: new HttpHeaders({ 'Content-Type': 'application/json' })}
//获取分页后的信息getPage(pageNum: number, pageSize: number) {this.page.pageNum = pageNum / 10;this.page.pageSize = pageSize;return this.http.post<any>(this.url + "page", this.page, this.httpOptions).toPromise().then(response => { return response })}
}

这里我将获取到的参数以post请求方式访问后端

总结

后端分页没有什么难度，主要是前后端之间的传参比较麻烦，前端主要是传页码还有一页的大小给后端，后端接收后调用对应的方法后封装成JSON对象的形式返回给前端，前端通过定义变量对接收JSON对象的值，然后在html中调用对应的值就可以了。最后附上渲染获得的分页数据的部分代码，仅供参考。

<p-table [value]="infos" [paginator]="true" [(rows)]="rows" [(first)]="first" [(selection)]="selectedFundInfo"[(totalRecords)]="totalRecords" [lazy]="true" [(loading)]="loading" (onLazyLoad)="loadFundInfos($event)"><ng-template pTemplate="caption"><button pButton type="button" label="新增" icon="pi pi-plus" class="p-button-sm p-mr-1 p-ml-1"(click)="addOne()"></button><button pButton type="button" label="删除" icon="pi pi-trash" class="p-button-sm" [disabled]="isCheckBoxNotSelect"(click)="confirmDelLots()"></button></ng-template><ng-template pTemplate="header"><tr><th style="width: 60px;"></th><th>序号</th><th>基金代码</th><th>基金简称</th><th>基金全称</th><th>基金类型</th><th>基金类别</th><th>托管行</th><th>结算参与人编码</th><th>操作</th></tr></ng-template><ng-template pTemplate="body" let-info let-index="rowIndex"><tr><td><p-tableCheckbox [value]="info"></p-tableCheckbox></td><td>{{index+1}}</td><td>{{info.fundCode}}</td><td>{{info.fundName}}</td><td>{{info.fundFullName}}</td><td>{{info.fundCategory}}</td><td>{{info.fundType}}</td><td>{{info.custodianCode}}</td><td>{{info.settleParticipantNo}}</td><td><button pButton icon="pi pi-user-edit" class="p-button-sm p-mr-2" (click)="editFund(info)"></button><button pButton icon="pi pi-trash" class="p-button-sm" (click)="confirmDelOne(info)"></button></td></tr></ng-template><ng-template pTemplate="paginatorleft" let-state><button type="button" pButton icon="pi pi-refresh" label="首页" class="p-button-sm" (click)="reset()"></button></ng-template></p-table>

界面展示：

懒加载效果：