[武汉|结业弟子]JS-万晶|2020年06月28日的日报-技能树.IT修真院

发表于： 2020-06-28 22:26:36

1 2364

今天完成的事情：今天写了分页的部分内容
明天计划的事情：继续后续的任务
遇到的问题：虽然会用了但是原理还不太清楚明天再看一下
收获：组件库用的是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;
        // 这里必须减1
        this.SkipCount = (size - 1) * this.MaxResultCount;
        this.getSource();
      }

}