前提：

我使用的是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();}}