Blazor - Get Started with Pager

Blazor - Get Started with Smart.Pager

Setup The Project

Follow the Getting Started guide to set up your Blazor Application with Smart UI.

Setup Basic Pager

Smart.Pager is a custom navigation control component, typically used to navigate between pages or grids and tables.

  1. Add the Pager component to the Pages/Index.razor file
  2. PagesCount determines the total number of pages, while PageIndexSelectors - how many of them are visible at once
    <Pager PagesCount=20 PageIndexSelectors=10 ShowPageIndexSelectors></Pager>
    Pager with pages
  3. Enabling ShowPrevNextNavigationButtons and AutoEllipsis allows users to navigate content more easily
    <Pager ShowPrevNextNavigationButtons AutoEllipsis="PagerAutoEllipsis.Both"
    PagesCount=20 PageIndexSelectors=10 ShowPageIndexSelectors></Pager>
    Pager with buttons
  4. ShowNavigationButtonLabels changes the navigation buttons from icons to labeled buttons
    <Pager ShowPrevNextNavigationButtons AutoEllipsis="PagerAutoEllipsis.Both" ShowNavigationButtonLabels
    PagesCount=20 PageIndexSelectors=10 ShowPageIndexSelectors></Pager>
    Pager with button labels
  5. ShowNavigationInput ShowSummary ShowPageSizeSelector give additional navigation options to the user
    <Pager ShowPrevNextNavigationButtons AutoEllipsis="PagerAutoEllipsis.Both" ShowNavigationButtonLabels
    ShowNavigationInput ShowSummary ShowPageSizeSelector
    PagesCount=100 PageIndexSelectors=10 ShowPageIndexSelectors></Pager>
    Pager selector

Pager Events

Smart.Pager provides multiple events that can help you expand the component's functionality.

  • OnChange - triggered when user selects a new item
    Event Details: N/A
  • OnPageSizeChanged - triggered when page size is changed
    Event Details: N/A

The demo below uses the OnChange Event to change the content to the appropriate page:

<Pager @ref="@pager" ShowPrevNextNavigationButtons AutoEllipsis="PagerAutoEllipsis.Both" ShowNavigationButtonLabels
ShowPageIndexSelectors PagesCount=20 PageIndexSelectors=10 OnChange="OnChange" ></Pager>

    Pager pager;
    string[] pagesArr = new string[]{"Page 1", "Page 2", "Page 3", "Page 4", "Page 5!"};
    int index = 0;

    private void OnChange(Event ev){
        index = pager.PageIndex;
Pager OnChange event