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

   <Pager></Pager>

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>

   
3. Enabling ShowPrevNextNavigationButtons and AutoEllipsis allows users to navigate content more easily

   <Pager ShowPrevNextNavigationButtons AutoEllipsis="PagerAutoEllipsis.Both"
   PagesCount=20 PageIndexSelectors=10 ShowPageIndexSelectors></Pager>

   
4. ShowNavigationButtonLabels changes the navigation buttons from icons to labeled buttons

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

   
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 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:

<h3>@(pagesArr[index])</h3>
<Pager @ref="@pager" ShowPrevNextNavigationButtons AutoEllipsis="PagerAutoEllipsis.Both" ShowNavigationButtonLabels
ShowPageIndexSelectors PagesCount=20 PageIndexSelectors=10 OnChange="OnChange" ></Pager>

@code{
    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;
    }
}