angular2项目里使用ng-zorro的分页组件

前提:

我使用的是angular-cil做的项目
组件库用的是ng-zorro
angular2项目里使用ng-zorro的分页组件_第1张图片
实现的效果是:
显示总条数、可跳转到其他页(两个按钮同样有效)、可改变每页条数
angular2项目里使用ng-zorro的分页组件_第2张图片

具体步骤如下:

1、使表格的分页隐藏,避免重复

(我用的使表格,你们可以使用其他的,这一步可省略)
主要是:[nzShowPagination]='false'

……

2、使用分页组件

使用ng-zorro里的这个组件模板
angular2项目里使用ng-zorro的分页组件_第3张图片
html里:


 
  共 {{ total }} 条 

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

}


你可能感兴趣的:(angular,JavaScript,ng-zorro)