• Pagination分页
  • 何时使用
  • 代码演示
  • API
  • nz-paginationcomponent

Pagination分页

采用分页的形式分隔长列表，每次只加载一个页面。

何时使用

• 当加载/渲染所有数据将花费很多时间时；

• 可切换页码浏览数据。

  1. import { NzPaginationModule } from 'ng-zorro-antd/pagination';

代码演示

基本
基础分页。
1. import { Component } from '@angular/core';
2. 3. @Component({
4. selector: 'nz-demo-pagination-basic',
5. template: 6. <nz-pagination [nzPageIndex]="1" [nzTotal]="50"></nz-pagination> 7.
8. })
9. export class NzDemoPaginationBasicComponent {}

更多
更多分页。
1. import { Component } from '@angular/core';
2. 3. @Component({
4. selector: 'nz-demo-pagination-more',
5. template: 6. <nz-pagination [nzPageIndex]="1" [nzTotal]="500"></nz-pagination> 7.
8. })
9. export class NzDemoPaginationMoreComponent {}

改变
改变每页显示条目数。
1. import { Component } from '@angular/core';
2. 3. @Component({
4. selector: 'nz-demo-pagination-changer',
5. template: 6. <nz-pagination [nzPageIndex]="3" [nzTotal]="500" nzShowSizeChanger [nzPageSize]="10"></nz-pagination> 7. <br /> 8. <nz-pagination [nzPageIndex]="3" [nzTotal]="500" nzShowSizeChanger [nzPageSize]="10" nzDisabled></nz-pagination> 9.
10. })
11. export class NzDemoPaginationChangerComponent {}

跳转
快速跳转到某一页。
1. import { Component } from '@angular/core';
2. 3. @Component({
4. selector: 'nz-demo-pagination-jump',
5. template: 6. <nz-pagination [nzPageIndex]="2" [nzTotal]="500" nzShowQuickJumper></nz-pagination> 7. <br /> 8. <nz-pagination [nzPageIndex]="2" [nzTotal]="500" nzShowQuickJumper nzDisabled></nz-pagination> 9.
10. })
11. export class NzDemoPaginationJumpComponent {}

迷你
迷你版本。
1. import { Component } from '@angular/core';
2. 3. @Component({
4. selector: 'nz-demo-pagination-mini',
5. template: 6. <nz-pagination [(nzPageIndex)]="current" [nzTotal]="50" [nzSize]="'small'"></nz-pagination> 7. <br /> 8. <nz-pagination [(nzPageIndex)]="current" [nzTotal]="50" [nzSize]="'small'" nzShowSizeChanger nzShowQuickJumper></nz-pagination> 9. <br /> 10. <nz-pagination [(nzPageIndex)]="current" [nzTotal]="50" [nzSize]="'small'" [nzShowTotal]="totalTemplate"></nz-pagination> 11. <ng-template #totalTemplate let-total>Total {{ total }} items</ng-template> 12.
13. })
14. export class NzDemoPaginationMiniComponent {
15. current = 1;
16. }

简洁
简单的翻页。
1. import { Component } from '@angular/core';
2. 3. @Component({
4. selector: 'nz-demo-pagination-simple',
5. template: 6. <nz-pagination [nzPageIndex]="2" [nzTotal]="50" nzSimple></nz-pagination> 7.
8. })
9. export class NzDemoPaginationSimpleComponent {}

页码
改变页码。
1. import { Component } from '@angular/core';
2. 3. @Component({
4. selector: 'nz-demo-pagination-controlled',
5. template: 6. <nz-pagination [nzPageIndex]="3" [nzTotal]="50"></nz-pagination> 7.
8. })
9. export class NzDemoPaginationControlledComponent {}

总数
通过设置 nzShowTotal 展示总共有多少数据。
1. import { Component } from '@angular/core';
2. 3. @Component({
4. selector: 'nz-demo-pagination-total',
5. template: 6. <nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate"></nz-pagination> 7. <br /> 8. <nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="rangeTemplate"></nz-pagination> 9. <ng-template #totalTemplate let-total> Total {{ total }} items </ng-template> 10. <ng-template #rangeTemplate let-range="range" let-total> {{ range[0] }}-{{ range[1] }} of {{ total }} items </ng-template> 11.
12. })
13. export class NzDemoPaginationTotalComponent {}

上一步和下一步
修改上一步和下一步为文字链接。
1. import { Component } from '@angular/core';
2. 3. @Component({
4. selector: 'nz-demo-pagination-item-render',
5. template: 6. <nz-pagination [nzPageIndex]="1" [nzTotal]="500" [nzItemRender]="renderItemTemplate"></nz-pagination> 7. <ng-template #renderItemTemplate let-type let-page="page"> 8. <ng-container [ngSwitch]="type"> 9. <a *ngSwitchCase="'page'">{{ page }}</a> 10. <a *ngSwitchCase="'prev'">Previous</a> 11. <a *ngSwitchCase="'next'">Next</a> 12. <a *ngSwitchCase="'prev_5'"><<</a> 13. <a *ngSwitchCase="'next_5'">>></a> 14. </ng-container> 15. </ng-template> 16.
17. })
18. export class NzDemoPaginationItemRenderComponent {}

API

  1. <nz-pagination [nzPageIndex]="1" [nzTotal]="50"></nz-pagination>

nz-paginationcomponent