Pagination: Blazor pagination component

Examples

Binding

Bind Selected to drive your own paging; Count is the number of pages.

Showing orders 1–20 of 240

website/Examples/Navigation/PaginationBasicExample.razor Source

Colors

Color paints the current page with the matching btn colour.

website/Examples/Navigation/PaginationColorsExample.razor Source

Ranges and jumps

ShowFirstButton and ShowLastButton add jump buttons; BoundaryCount and MiddleCount shape the visible range.

website/Examples/Navigation/PaginationRangeExample.razor Source

Disabled

Disabled freezes every button, for example while a page is loading.

Loading invoices…

website/Examples/Navigation/PaginationDisabledExample.razor Source

Playground

Count

Selected

Color Color

ShowFirstButton

ShowLastButton

BoundaryCount

MiddleCount

Disabled

<Pagination Count="10" Selected="4" Color="Color.Primary" />

API

<Pagination>

DaisyBlazor

Parameters

AriaLabel string
= null
Accessible name for the pagination navigation landmark. Null uses the app-wide Strings.
BoundaryCount int
= 1
Number of pages always shown at the start and end of the range; defaults to 1.
Color Color
= Color.Default
Color of the selected page button (btn-{color}); Default uses btn-neutral.
Count int
= 0
Total number of pages.
Disabled bool
= false
Disables every page and navigation button.
FirstPageLabel string
= null
Accessible label for the "first page" control. Null uses the app-wide Strings.
LastPageLabel string
= null
Accessible label for the "last page" control. Null uses the app-wide Strings.
MiddleCount int
= 3
Number of pages shown around the selected page; defaults to 3.
NextPageLabel string
= null
Accessible label for the "next page" control. Null uses the app-wide Strings.
PreviousPageLabel string
= null
Accessible label for the "previous page" control. Null uses the app-wide Strings.
Selected int
= 1
The current page, 1-based; defaults to 1. Supports two-way binding.
ShowFirstButton bool
= false
Shows a button that jumps to the first page.
ShowLastButton bool
= false
Shows a button that jumps to the last page.
Class string
= null
Extra CSS classes merged onto the root element.
Style string
= null
Inline CSS styles applied to the root element.

Name	Type	Default	Description
AriaLabel	string	null	Accessible name for the pagination navigation landmark. Null uses the app-wide Strings.
BoundaryCount	int	1	Number of pages always shown at the start and end of the range; defaults to 1.
Color	Color	Color.Default	Color of the selected page button (btn-{color}); Default uses btn-neutral.
Count	int	0	Total number of pages.
Disabled	bool	false	Disables every page and navigation button.
FirstPageLabel	string	null	Accessible label for the "first page" control. Null uses the app-wide Strings.
LastPageLabel	string	null	Accessible label for the "last page" control. Null uses the app-wide Strings.
MiddleCount	int	3	Number of pages shown around the selected page; defaults to 3.
NextPageLabel	string	null	Accessible label for the "next page" control. Null uses the app-wide Strings.
PreviousPageLabel	string	null	Accessible label for the "previous page" control. Null uses the app-wide Strings.
Selected	int	1	The current page, 1-based; defaults to 1. Supports two-way binding.
ShowFirstButton	bool	false	Shows a button that jumps to the first page.
ShowLastButton	bool	false	Shows a button that jumps to the last page.
Class	string	null	Extra CSS classes merged onto the root element.
Style	string	null	Inline CSS styles applied to the root element.

Events

SelectedChanged EventCallback<int>
Raised with the new 1-based page when the user selects a different page.

Name	Type	Description
SelectedChanged	EventCallback<int>	Raised with the new 1-based page when the user selects a different page.

From MudPagination

Pagination keeps MudPagination's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.