radzen-blazor/Radzen.Blazor/RadzenPager.razor

@inherits RadzenComponent
@if (GetVisible())
{
    <nav @ref="@Element" @attributes="Attributes" class="@GetCssClass()" style="@Style" id="@GetId()"
         aria-label="@NavigationAriaLabel"
         @onkeydown="@OnKeyDown" @onkeydown:preventDefault="preventKeyDown" @onkeydown:stopPropagation="stopKeydownPropagation">
        @if(ShowPagingSummary)
        {
            <span class="rz-pager-summary">
                @if (PagingSummaryTemplate != null)
                {
                    @PagingSummaryTemplate(new(CurrentPage + 1, numberOfPages, Count))
                }
                else
                {
                    @(string.Format(PagingSummaryFormat, CurrentPage + 1, numberOfPages, Count))   
                }
            </span>
        }
        <ul class="rz-pager-pages" role="list">
            <li class="rz-pager-item">
                <button id="@(GetId() + "fp")" type="button" tabindex="@GetButtonTabIndex(-2)" class="rz-pager-first rz-pager-element @(skip > 0 ? "": "rz-state-disabled") @(focusedIndex == -2 ? "rz-state-focused": "")"
                        @onclick="@(() => OnFirstPageClick())" aria-label="@FirstPageAriaLabel" title="@FirstPageTitle" disabled="@(CurrentPage <= 0)" aria-disabled="@(CurrentPage <= 0 ? "true" : "false")">
                    <span class="notranslate rz-pager-icon rzi rzi-step-backward"></span>
                </button>
            </li>
            <li class="rz-pager-item">
                <button id="@(GetId() + "pp")" type="button" tabindex="@GetButtonTabIndex(-1)" class="rz-pager-prev rz-pager-element @(skip > 0 ? "": "rz-state-disabled") @(focusedIndex == -1 ? "rz-state-focused": "")"
                        @onclick="@(() => OnPrevPageClick())" aria-label="@PrevPageAriaLabel" title="@PrevPageTitle" disabled="@(CurrentPage <= 0)" aria-disabled="@(CurrentPage <= 0 ? "true" : "false")">
                    <span class="notranslate rz-pager-icon rzi rzi-caret-left"></span>
                    @if (PrevPageLabel != null)
                    {
                        <span class="rz-pager-label">@PrevPageLabel</span>
                    }
                </button>
            </li>
            @foreach (var i in Enumerable.Range(startPage, Math.Min(endPage + 1, PageNumbersCount)))
            {
                <li class="rz-pager-item">
                    <button id="@(GetId() + i.ToString() + "p")" type="button" tabindex="@GetButtonTabIndex(i - startPage)" class="rz-pager-page rz-pager-element @(i == CurrentPage ? "rz-state-active" : "") @(startPage + focusedIndex == i ? "rz-state-focused": "")"
                            @onclick="@(() => OnPageClick(i, startPage))" aria-current="@(i == CurrentPage ? "page" : null)" aria-label="@string.Format(PageAriaLabelFormat, (i + 1).ToString())"
                            title="@string.Format(PageTitleFormat, (i + 1).ToString())">@(i + 1)</button>
                </li>
            }
            <li class="rz-pager-item">
                <button id="@(GetId() + "np")" type="button" tabindex="@GetButtonTabIndex(Math.Min(endPage + 1, PageNumbersCount))" class="rz-pager-next rz-pager-element @((CurrentPage != numberOfPages - 1) ? "": "rz-state-disabled") @(focusedIndex == Math.Min(endPage + 1, PageNumbersCount)? "rz-state-focused": "")"
                        @onclick="@(() => OnNextPageClick(endPage))" aria-label="@NextPageAriaLabel" title="@NextPageTitle" disabled="@(CurrentPage >= (numberOfPages - 1))" aria-disabled="@(CurrentPage >= (numberOfPages - 1) ? "true" : "false")">
                    @if (NextPageLabel != null)
                    {
                        <span class="rz-pager-label">@NextPageLabel</span>
                    }
                    <span class="notranslate rz-pager-icon rzi rzi-caret-right"></span>
                </button>
            </li>
            <li class="rz-pager-item">
                <button id="@(GetId() + "lp")" type="button" tabindex="@GetButtonTabIndex(Math.Min(endPage + 1, PageNumbersCount) + 1)" class="rz-pager-last rz-pager-element  @((CurrentPage != numberOfPages - 1) ? "": "rz-state-disabled") @(focusedIndex == Math.Min(endPage + 1, PageNumbersCount) + 1 ? "rz-state-focused": "")"
                        @onclick="@(() => OnLastPageClick(endPage))" aria-label="@LastPageAriaLabel" title="@LastPageTitle" disabled="@(CurrentPage >= (numberOfPages - 1))" aria-disabled="@(CurrentPage >= (numberOfPages - 1) ? "true" : "false")">
                    <span class="notranslate rz-pager-icon rzi rzi-step-forward"></span>
                </button>
            </li>
            @if(AllowReload)
            {
                <li class="rz-pager-item">
                    <button id="@(GetId() + "rl")" type="button" tabindex="@TabIndex" class="rz-pager-reload rz-pager-element"
                            @onclick="@OnReloadClick" aria-label="@ReloadAriaLabel" title="@ReloadTitle">
                        <span class="notranslate rz-pager-icon rz-pager-reload-icon rzi rzi-reload"></span>
                    </button>
                </li>
            }
        </ul>

        @if(PageSizeOptions != null && PageSizeOptions.Any())
        {
            <RadzenDropDown TValue="int" Data="@PageSizeOptions" Value="@PageSize" Change="@OnPageSizeChanged" InputAttributes="@(new Dictionary<string, object>() { { "aria-label", PageSizeText } })" />
            <span class="rz-pagesize-text">@PageSizeText</span>
        }
    </nav>
}