前提：
我使用的是angular-cil做的项目
组件库用的是ng-zorro
使用表格样式，却不使用表格自带的分页，而是去使用单独的分页组件
实现的效果是：
显示总条数、可跳转到其他页（两个按钮同样有效）、可改变每页条数
具体步骤如下：
1、使表格的分页隐藏，避免重复
（我用的使表格，你们可以使用其他的，这一步可省略）
主要是：[nzShowPagination]='false'
<nz-table #borderedTable nzBordered [nzShowPagination]='false' [nzData]="[{}]" >……</nz-table>
2、使用分页组件
使用ng-zorro里的这个组件模板
html里：
<!-- nzPageIndex:当前展示的是第几页（数据绑定）nzShowTotal:显示总条数的模板（用于显示数据总量和当前数据范围）nzTotal：共多少条数据 （数据绑定）nzPageSize：每页几条数据，可双向绑定nzShowSizeChanger是否可以改变 nzPageSize 默认是false。有了这个，可以改变每页显示条数（10、20……）nzPageSizeOptions：指定每页可以显示多少条10，20，30……（不用写，有默认值，测试时可以写）(nzPageSizeChange)： 每页条数改变的回调(nzPageIndexChange):页码改变的回调--><nz-pagination [nzShowTotal]="totalTemplate" [nzPageIndex]="page" [nzTotal]=total nzShowSizeChanger (nzPageSizeChange)="nzPageSizeChange($event)" (nzPageIndexChange)="nzPageIndexChange($event)"></nz-pagination><ng-template #totalTemplate let-total> 共 {{ total }} 条 </ng-template>
ts文件：
export class XiayigeComponent implements OnInit {// 数据总条数（没有设置初始值的话，分页不显示）public total: any = 1;// 当前页public page: any = 1;// 每页行数public MaxResultCount: any = 10;// 跳转数量 skipCount=page*MaxResultCount 等于跳转页数*每页几条(这个是请求数据时要用的)public SkipCount: any = 0;// 生命周期函数ngOnInit(): void {// 调用请求表格数据的函数this.getSource();}// 请求表格数据的接口函数// 有token验证就加，没有就去掉headers，params是请求接口时要传递的参数getSource() {this.http.get<string> ( apiUrl + '/ProjectRepair/GetContractCompanys', {headers: {Authorization: 'Bearer ' + this.token,},params: {MaxResultCount: this.MaxResultCount,SkipCount: this.SkipCount,}}).subscribe((res: any) => {this.source = res.result.items;console.log(this.source);this.total = res.result.totalCount;});}// 每页条数发生改变时的回调nzPageSizeChange(newSise) {this.MaxResultCount = newSise;this.getSource();}// 跳转到其他页时的回调nzPageIndexChange(size) {// console.log(size);this.page = size;// 这里必须减1this.SkipCount = (size - 1) * this.MaxResultCount;this.getSource();}}
注意：(nzPageIndexChange)在这个函数里，调用获取数据接口时，可能会自动调用两次，解决办法，加个定时器：
// 页码改变的回调// tslint:disable-next-line:typedefnzPageIndexChangeFast(current: number) {this.currentFast = current;// 点击时，current就输出一次，但是加上方法调用，整体就会调用两次,为什么// 解决： 加个定时器就好了const Timeout = setTimeout(() => {this.GetProinfoSpeciesfast();clearTimeout(Timeout);}, 100);}// 每页条数改变的回调// tslint:disable-next-line:typedefnzPageSizeChangeFast(MaxResultCount: number) {this.MaxResultCountFast = MaxResultCount;this.GetProinfoSpeciesfast();}
