DxPager Class

A data navigation component that indicates the current position within the bound data source and allows quick access to a different data page.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxPager :
    DxComponentBase,
    ISizeModeAccessor,
    IRequireSelfCascading,
    IHandleEvent

Remarks

The DevExpress Pager for Blazor (<DxPager>) component enables page navigation. It is integrated into our Grid and Pivot Grid components.

Pager Overview

Run Demo: Pager

Follow the steps below to add the Pager component to an application:

Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
Add the <DxPager>…</DxPager> markup to a .razor file.
Configure the component: specify the total number of pages, an acitve page, and so on (see the sections below).

Page Count

Use the PageCount property to specify the total number of pager’s pages.

<DxPager PageCount="@PageCount"> 
</DxPager>

@code { 
    int PageCount { get; set; } = 5; 
}

Active Page

To activate a <DxPager> page, a user should click it or use the navigation buttons. To switch pages in code, assign a zero-based page index to the ActivePageIndex property. To handle the active page’s change, use the ActivePageIndexChanged event.

Navigation Pager

<DxPager PageCount="@PageCount"
         @bind-ActivePageIndex="@ActivePageIndex" > 
</DxPager>

@code { 
    int PageCount { get; set; } = 10; 
    int ActivePageIndex { get; set; } = 7;
}

Run Demo: Card View

Numeric Button Count

Use the VisibleNumericButtonCount property to specify the maximum number of numeric buttons that can be displayed within a pager. When the component is rendered for the first time, it displays a range of numeric buttons that includes the active page (if the ActivePageIndex value is specified) or numeric buttons from 1 to the VisibleNumericButtonCount value. To navigate to other numeric buttons, a user should use navigation buttons.

<DxPager PageCount="100"
         ActivePageIndex="50"
         VisibleNumericButtonCount="7"
         NavigationMode="PagerNavigationMode.NumericButtons"> 
</DxPager>

Pager Navigation Buttons

Run Demo: Pager - Limit the Number of Page Buttons

If all the numeric buttons are displayed (i.e., PageCount is less or equal to the VisibleNumericButtonCount), the Pager’s navigation buttons are hidden.

<DxPager PageCount="10"
         ActivePageIndex="2"
         VisibleNumericButtonCount="10">
</DxPager>

Pager - Hidden navigation buttons

Run Demo: Pager - All Page Numbers Visible

When the Pager is in Auto mode and the total number of its pages (PageCount) equals or exceeds the SwitchToInputBoxButtonCount property’s value, the Pager switches from numeric buttons to the Go to Page input box.

<DxPager PageCount="@PageCount"
         @bind-ActivePageIndex="@ActivePageIndex"
         SwitchToInputBoxButtonCount="@SwitchToInputBox"> 
</DxPager>

@code { 
    int PageCount { get; set; } = 5; 
    int ActivePageIndex { get; set; } = 1;
    int SwitchToInputBox { get; set; } = 15;
    // int SwitchToInputBox { get; set; } = 4;
}

Pager Switch to Input Box

Size Modes

Use the SizeMode property to specify a Pager size. The code below applies different size modes to Pager components.

<DxPager PageCount="1000" 
         ActivePageIndex="5" 
         NavigationMode="PagerNavigationMode.InputBox" 
         SizeMode="SizeMode.Small" />

<DxPager PageCount="1000" 
         ActivePageIndex="5" 
         NavigationMode="PagerNavigationMode.InputBox" 
         SizeMode="SizeMode.Medium" />

<DxPager PageCount="1000" 
         ActivePageIndex="5" 
         NavigationMode="PagerNavigationMode.InputBox" 
         SizeMode="SizeMode.Large" />

Pager - Size Modes