一、分頁(yè)顯示數(shù)據(jù)

可以加快加載速度,比如這五萬(wàn)條數(shù)據(jù)一次加載較慢就可以使用分頁(yè)加載

image.png

<!-- <h2>公司彈框</h2> -->
<nz-card>
<input type="text" style="width: 200px;" [(ngModel)]="orgName" nz-input placeholder="編號(hào)、名稱" />
&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"         <!-- 數(shù)據(jù)源 -->

          [nzFrontPagination]="false"

          [nzLoading]="pageInfo.loading"

          [nzPageSize]="pageInfo.pageSize"    <!-- 每頁(yè)條數(shù)  -->

          [nzTotal]="pageInfo.total"            <!-- 總條數(shù) -->

          [nzPageIndex]="pageInfo.pageNum"       <!-- 頁(yè)數(shù) -->

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

          [nzShowTotal]="totalTemplate"

          (nzPageIndexChange)="changePageIndex($event)"     <!-- 變更當(dāng)前頁(yè) -->

          (nzPageSizeChange)="changePageSize($event)"         <!-- 更改當(dāng)前尺寸 -->

>

<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>           <!-- 選擇回調(diào) -->

<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;
});

}

/**

• 變更當(dāng)前頁(yè)
• @param value
  */
  changePageIndex(value:any){
  this.pageInfo.pageNum = value;
  this.getCompany();
  }

/**

• 變更當(dāng)前頁(yè)的尺寸
• @param value
  */
  changePageSize(value:any){
  this.pageInfo.pageSize = value;
  this.getCompany();
  }

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