Pagination分页

• 当加载/渲染所有数据将花费很多时间时；
• 可切换页码浏览数据。

基本

基础分页。

@Component({
  selector: 'nz-demo-pagination-basic',
  template: `
    <nz-pagination [nzPageIndex]="1" [nzTotal]="50"></nz-pagination>
  `
})
export class NzDemoPaginationBasicComponent {}

更多

更多分页。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-pagination-more',
  template: `
    <nz-pagination [nzPageIndex]="1" [nzTotal]="500"></nz-pagination>
  `
})
export class NzDemoPaginationMoreComponent {}

改变

跳转

快速跳转到某一页。

@Component({
  selector: 'nz-demo-pagination-jump',
  template: `
    <nz-pagination [nzPageIndex]="2" [nzTotal]="500" nzShowQuickJumper></nz-pagination>
    <br />
    <nz-pagination [nzPageIndex]="2" [nzTotal]="500" nzShowQuickJumper nzDisabled></nz-pagination>
  `
})
export class NzDemoPaginationJumpComponent {}

迷你

迷你版本。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-pagination-mini',
  template: `
    <nz-pagination [(nzPageIndex)]="current" [nzTotal]="50" [nzSize]="'small'"></nz-pagination>
    <br />
    <br />
    <nz-pagination [(nzPageIndex)]="current" [nzTotal]="50" [nzSize]="'small'" [nzShowTotal]="totalTemplate"></nz-pagination>
    <ng-template #totalTemplate let-total>Total {{ total }} items</ng-template>
  `
})
export class NzDemoPaginationMiniComponent {
}

简洁

页码

改变页码。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-pagination-controlled',
  template: `
    <nz-pagination [nzPageIndex]="3" [nzTotal]="50"></nz-pagination>
  `
})
export class NzDemoPaginationControlledComponent {}

总数

通过设置 nzShowTotal 展示总共有多少数据。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-pagination-total',
  template: `
    <nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate"></nz-pagination>
    <br />
    <nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="rangeTemplate"></nz-pagination>
    <ng-template #totalTemplate let-total> Total {{ total }} items </ng-template>
    <ng-template #rangeTemplate let-range="range" let-total> {{ range[0] }}-{{ range[1] }} of {{ total }} items </ng-template>
  `
})
export class NzDemoPaginationTotalComponent {}

上一步和下一步

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