Pagination

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

Import

Source

Docs

When To Use#

Basic pagination.

      Loading...

More pages.

      Loading...

Change nzPageSize.

      Loading...

Jump to a page directly.

      Loading...

Mini size pagination.

      Loading...

Simple mode.

      Loading...

Change page index number.

      Loading...

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

      Loading...

Use text link for prev and next button.

      Loading...

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

Property	Description	Type	Default	Global Config
`[nzTotal]`	total number of data items	`number`	`0`	-
`[nzPageIndex]`	current page number，double binding	`number`	`1`	-
`[nzPageSize]`	number of data items per page, double binding	`number`	`10`	-
`[nzDisabled]`	disable pagination	`boolean`	`false`	-
`[nzShowQuickJumper]`	determine whether you can jump to pages directly	`boolean`	`false`	✅
`[nzShowSizeChanger]`	determine whether `nzPageSize` can be changed	`boolean`	`false`	✅
`[nzSimple]`	whether to use simple mode	`boolean`	-	✅
`[nzSize]`	specify the size of `nz-pagination`	`'small' \| 'default'`	`'default'`	✅
`[nzResponsive]`	`Pagination` would resize according to the width of the window	`boolean`	`false`	-
`[nzPageSizeOptions]`	specify the sizeChanger options	`number[]`	`[10, 20, 30, 40]`	✅
`[nzItemRender]`	to customize item	`TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next'\| 'prev_5'\| 'next_5', page: number }>`	-	-
`[nzShowTotal]`	to display the total number and range	`TemplateRef<{ $implicit: number, range: [ number, number ] }>`	-	-
`[nzHideOnSinglePage]`	Whether to hide pager on single page	`boolean`	`false`	-
`(nzPageIndexChange)`	current page number change callback	`EventEmitter<number>`	-	-
`(nzPageSizeChange)`	number of data items per page change callback	`EventEmitter<number>`	-	-