angular7 ng-zorro框架的列表实现前端分页
废话就不多写了
html页面代码如下:
<nz-table #basicTable [nzData]="listOfData.data"
(nzPageIndexChange)="listOfData.pageIndexChange($event)" [nzScroll]="{ y: '240px' }"
[nzFrontPagination]="false" [nzTotal]="listOfData.total" [(nzPageIndex)]="listOfData.pageIndex" [(nzPageSize)]="listOfData.pageSize"
>
</nz-table>
表格属性说明:
nzScroll :我这里的配置意思是 超过240像素 出现纵滚动条
nzPageIndexChange:index改变时调用的函数
nzFrontPagination:是否在前端对数据进行分页,如果在服务器分页数据或者需要在前端显示全部数据时传入 false
其他的参数就不用写了 你们应该都知道
对应的 ts 代码如下
这里我写了一个根据每页数据条数 改变执行的回调函数(以防备用) 我html中某页没用这个 不需要的可以不用写
说明一下 这个值 flowDataBf 这是对接口返回数据的备份
我们需要在获取接口返回数据后,备份一下完整的接口数据,并计算一下完整的total值 再调用一下分页函数(这里相当于初始化页面数据)
这三大处 分别都需要配置 才可以实现前端分页
1.html页面 表格接受相应的参数 及触发函数
2.ts 初始化表格参数/回调函数数据 分页或者条数尺寸改变时的数据分割函数
3.获取数据来源时 需要做一个深拷贝的备份 并且赋值完整数据的total数 ,调用分割数据的函数(第一页数据展示初始化)