When To Use

Examples

Basic

Changer

Jumper

Pagination

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

Import

Source

components/pagination

Docs

Edit this page

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.

Examples#

Basic

Basic pagination.

      Loading...

1
2
3
4
5
•••
50

More pages.

      Loading...

1
2
3
4
5
•••
50
10 / page

1
2
3
4
5
•••
50
10 / page

Changer

Change nzPageSize.

      Loading...

1
2
3
4
5
•••
50
Go to Page

1
2
3
4
5
•••
50
Go to Page

Jumper

Jump to a page directly.

      Loading...

1
2
3
4
5
10 / page
Go to Page

Total 50 items
1
2
3
4
5

Mini size

Mini size pagination.

      Loading...

Simple mode

Simple mode.

      Loading...

Page Index

Change page index number.

      Loading...

Total 85 items
1
2
3
4
5

1-20 of 85 items
1
2
3
4
5

Total number

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

      Loading...

Align

use nzAlign to align horizontally the pagination

      Loading...

20.4.0

Prev and next

Use text link for prev and next button.

      Loading...

API#

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

nz-paginationcomponent#

Property	Description	Type	Default	Global Config	Version
`[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`	-
`[nzAlign]`	Align	`NzPaginationAlign`	`start`	-	20.4.0
`(nzPageIndexChange)`	current page number change callback	`EventEmitter<number>`	-	-
`(nzPageSizeChange)`	number of data items per page change callback	`EventEmitter<number>`	-	-