logo

Pagination

Examples

Basic pagination.

expand code expand code

More pages.

expand code expand code

Change pageSize.

expand code expand code

Jump to a page directly.

expand code expand code

Mini size pagination.

expand code expand code

Simple mode.

expand code expand code

Controlled page number.

expand code expand code

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

expand code expand code

Show all configured prop.

expand code expand code

Use text link for prev and next button.

expand code expand code

Custom icon.

expand code expand code

Pagination API#

Property Description Type Default Value
Total ParameterTotal number of data items Int32 0
DefaultCurrent ParameterDefault initial page number Int32 1
Disabled ParameterDisable pagination Boolean false
Current ParameterCurrent page number Int32 1
DefaultPageSize ParameterDefault number of data items per page Int32 10
PageSize ParameterNumber of data items per page Int32 10
OnChange ParameterCalled when the page number is changed, and it takes the resulting page number and pageSize as its arguments EventCallback<PaginationEventArgs> --
HideOnSinglePage ParameterWhether to hide pager on single page Boolean false
ShowSizeChanger ParameterDetermine whether to show PageSize select Boolean true when Total >= TotalBoundaryShowSizeChanger
PageSizeOptions ParameterSpecify the sizeChanger options Int32[] 10, 20, 50, 100
OnShowSizeChange ParameterCalled when PageSize is changed EventCallback<PaginationEventArgs> --
ShowQuickJumper ParameterDetermine whether you can jump to pages directly Boolean false
GoButton ParameterQuick jumper confirm button render fragment RenderFragment --
ShowTitle ParameterShow page item's title Boolean true
ShowTotal ParameterTo display the total number and range OneOf<Func<PaginationTotalContext, String?, RenderFragment<PaginationTotalContext??? --
Size ParameterSpecify the size of Pagination, can be set to small. PaginationSize --
Responsive Parameter(Not implemented) If Size is not specified, Pagination would resize according to the width of the window Boolean true
Simple ParameterWhether to use simple mode Boolean false
Locale ParameterLocalization options PaginationLocale LocaleProvider.CurrentLocale.Pagination
ItemRender ParameterCustom rendering for page item RenderFragment<PaginationItemRenderContext> --
ShowLessItems ParameterShow less page items Boolean false
ShowPrevNextJumpers ParameterShow or hide the next/previous buttons Boolean true
Direction ParameterLanguage direction String ltr
PrevIcon ParameterPrevious button RenderFragment<PaginationItemRenderContext> --
NextIcon ParameterNext button RenderFragment<PaginationItemRenderContext> --
JumpPrevIcon ParameterJump previous button RenderFragment<PaginationItemRenderContext> --
JumpNextIcon ParameterJump next icon RenderFragment<PaginationItemRenderContext> --
TotalBoundaryShowSizeChanger ParameterUsed to determine if the size changer should show using the default logic. Ignored if ShowSizeChanger provided. Int32 50
UnmatchedAttributes ParameterAny other parameters passed in get splatted onto the container element Dictionary<String, Object> --
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --
PageHeader Steps
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.