一、分页显示数据

可以加快加载速度,比如这五万条数据一次加载较慢就可以使用分页加载

image.png

<!-- <h2>公司弹框</h2> -->
<nz-card>
<input type="text" style="width: 200px;" [(ngModel)]="orgName" nz-input placeholder="编号、名称" />
&nbsp;&nbsp;<button nz-button nzType="primary" nzSearch (click)="getCompany()">查询</button>
</nz-card>
<ng-template #totalTemplate let-total>共 {{ pageInfo.total }}条 </ng-template>     

<nz-table #basicTable

          nzShowSizeChanger

          nzSize='small'

          [nzData]="pageInfo.list"         <!-- 数据源 -->

          [nzFrontPagination]="false"

          [nzLoading]="pageInfo.loading"

          [nzPageSize]="pageInfo.pageSize"    <!-- 每页条数  -->

          [nzTotal]="pageInfo.total"            <!-- 总条数 -->

          [nzPageIndex]="pageInfo.pageNum"       <!-- 页数 -->

          [nzPageSizeOptions]="[10,20,40,60,80,100]"

          [nzShowTotal]="totalTemplate"

          (nzPageIndexChange)="changePageIndex($event)"     <!-- 变更当前页 -->

          (nzPageSizeChange)="changePageSize($event)"         <!-- 更改当前尺寸 -->

>

<thead>

<tr>

<th nzShowCheckbox [nzDisabled]="true"></th>           <!-- 选择框  禁用 -->

<th>公司</th>

</tr>

</thead>

<tbody>

<tr *ngFor="let data of basicTable.data;let i = index;">

<td nzShowCheckbox [nzChecked]="checkedRowIndex === i" (nzCheckedChange)="checkedRowChange($event,data,i)"></td>           <!-- 选择回调 -->

<td (click)="select(data,i)">{{ data.orgName }}</td>

</tr>

</tbody>

</nz-table>```

##### ts中

checkedRowIndex = -1;
checkedRowData: any;
pageInfo:PageInfo<CompanyModalModel> = new PageInfo<CompanyModalModel>();
orgName:string;

constructor(
private modal: ModalHelper,
private companyConfig2Service: CompanyConfig2Service,
) {}

ngOnInit() {
this.getCompany();
}

select(data, i) {
this.checkedRowChange(true, data, i);
}

getCompany() {
this.pageInfo.loading=true;
this.companyConfig2Service.getCompany({pageInfo:{pageNum:this.pageInfo.pageNum,pageSize:this.pageInfo.pageSize},orgName:this.orgName}).subscribe(data => {
if(data){
this.pageInfo= data.data;
}
this.pageInfo.loading = false;
});

}

/**

• 变更当前页
• @param value
  */
  changePageIndex(value:any){
  this.pageInfo.pageNum = value;
  this.getCompany();
  }

/**

• 变更当前页的尺寸
• @param value
  */
  changePageSize(value:any){
  this.pageInfo.pageSize = value;
  this.getCompany();
  }

checkedRowChange(event, data, index) {
this.checkedRowIndex = event ? index : -1;
this.checkedRowData = data;
}