Ant Design Blazor
Pagination
A long list can be divided into several pages using 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.
Examples
Basic pagination.
More pages.
Change pageSize.
Jump to a page directly.
Mini size pagination.
Simple mode.
Controlled page number.
You can show the total number of data by setting showTotal.
Show all configured prop.
Custom icon.
Use text link for prev and next button.
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 |
| OnPageSizeChanged | Parameter | EventCallback<Int32> | -- |
| 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 | -- |