Pagination

A long list can be divided into several pages by Pagination, and only one page will be loaded at a time.

When To Use#

  • When it will take a long time to load/render all items.
  • If you want to browse the data by navigating through pages.

Import this Component Individually#

You can get more detail here.

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

Examples

Basic pagination.

expand codeexpand code
import { Component } from '@angular/core';

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

More pages.

expand codeexpand code
import { Component } from '@angular/core';

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

Change nzPageSize.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-pagination-changer',
  template: `
    <nz-pagination [nzPageIndex]="3" [nzTotal]="500" nzShowSizeChanger [nzPageSize]="10"></nz-pagination>
    <br />
    <nz-pagination [nzPageIndex]="3" [nzTotal]="500" nzShowSizeChanger [nzPageSize]="10" nzDisabled></nz-pagination>
  `
})
export class NzDemoPaginationChangerComponent {}

Jump to a page directly.

expand codeexpand code
import { Component } from '@angular/core';

@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 {}


Mini size pagination.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-pagination-mini',
  template: `
    <nz-pagination [(nzPageIndex)]="current" [nzTotal]="50" [nzSize]="'small'"></nz-pagination>
    <br />
    <nz-pagination
      [(nzPageIndex)]="current"
      [nzTotal]="50"
      [nzSize]="'small'"
      nzShowSizeChanger
      nzShowQuickJumper
    ></nz-pagination>
    <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 {
  current = 1;
}
  • 5

Simple mode.

expand codeexpand code
import { Component } from '@angular/core';

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

Change page index number.

expand codeexpand code
import { Component } from '@angular/core';

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

You can show the total number of data by setting nzShowTotal.

expand codeexpand code
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 {}

Use text link for prev and next button.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-pagination-itemRender',
  template: `
    <nz-pagination [nzPageIndex]="1" [nzTotal]="500" [nzItemRender]="renderItemTemplate"></nz-pagination>
    <ng-template #renderItemTemplate let-type let-page="page">
      <a *ngIf="type === 'pre'">Previous</a>
      <a *ngIf="type === 'next'">Next</a>
      <a *ngIf="type === 'page'">{{ page }}</a>
    </ng-template>
  `
})
export class NzDemoPaginationItemRenderComponent {}

API#

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

nz-pagination#

PropertyDescriptionTypeDefault
[nzTotal]total number of data itemsnumber0
[nzPageIndex]current page number,double bindingnumber1
[nzPageSize]number of data items per page, double bindingnumber10
[nzDisabled]disable paginationbooleanfalse
[nzShowQuickJumper]determine whether you can jump to pages directlybooleanfalse
[nzShowSizeChanger]determine whether nzPageSize can be changedbooleanfalse
[nzSimple]whether to use simple modeboolean-
[nzSize]specify the size of nz-pagination, can be set to small'small''default'
[nzPageSizeOptions]specify the sizeChanger optionsnumber[][10, 20, 30, 40]
[nzItemRender]to customize itemTemplateRef<{ $implicit: 'page' | 'prev' | 'next', page: number }>-
[nzShowTotal]to display the total number and rangeTemplateRef<{ $implicit: number, range: [ number, number ] }>-
[nzHideOnSinglePage]Whether to hide pager on single pagebooleanfalse
(nzPageIndexChange)current page number change callbackEventEmitter<number>-
(nzPageSizeChange)number of data items per page change callbackEventEmitter<number>-