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

  • 1
  • 2
  • 3
  • 4
  • 5
    • Basic

    Basic pagination.

    expand codeexpand code
    Loading...
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
    • More

    More pages.

    expand codeexpand code
    Loading...
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
    • 10 / page

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

    Change nzPageSize.

    expand codeexpand code
    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.

    expand codeexpand code
    Loading...
  • 1
  • 2
  • 3
  • 4
  • 5

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

  • Total 50 items
  • 1
  • 2
  • 3
  • 4
  • 5
    • Mini size

    Mini size pagination.

    expand codeexpand code
    Loading...
  • / 5
    • Simple mode

    Simple mode.

    expand codeexpand code
    Loading...
  • 1
  • 2
  • 3
  • 4
  • 5
    • Page Index

    Change page index number.

    expand codeexpand code
    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.

    expand codeexpand code
    Loading...
  • Previous
  • 1
  • 2
  • 3
  • 4
  • 5
  • >>
  • 50
  • Next
    • Prev and next

    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'✅
    [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>--