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 { NzPaginationModule } from 'ng-zorro-antd/pagination';

Examples

Basic pagination.

expand codeexpand code
      Loading...
    

More pages.

expand codeexpand code
      Loading...
    

Change nzPageSize.

expand codeexpand code
      Loading...
    

Jump to a page directly.

expand codeexpand code
      Loading...
    

  • 1
  • 2
  • 3
  • 4
  • 5
  • 10 / page
    Go to Page

Mini size pagination.

expand codeexpand code
      Loading...
    
  • / 5

Simple mode.

expand codeexpand code
      Loading...
    

Change page index number.

expand codeexpand code
      Loading...
    

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

expand codeexpand code
      Loading...
    

Use text link for prev and next button.

expand codeexpand code
      Loading...
    

API#

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

nz-pagination#

PropertyDescriptionTypeDefaultGlobal Config
[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''default'
[nzResponsive]Pagination would resize according to the width of the windowbooleanfalse-
[nzPageSizeOptions]specify the sizeChanger optionsnumber[][10, 20, 30, 40]
[nzItemRender]to customize itemTemplateRef<{ $implicit: 'page' | 'prev' | 'next'| 'prev_5'| 'next_5', 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>--