oqtane.framework/Oqtane.Client/Modules/Controls/Pager.razor

@namespace Oqtane.Modules.Controls
@inherits ModuleControlBase
@typeparam TableItem

<p>
    @if (Toolbar == "Top")
    {
        <ul class="pagination justify-content-center my-2">
            @if (_endPage > 1)
            {
                <li class="page-item">
                    <a class="page-link" @onclick=@(async () => UpdateList(1))><span class="oi oi-media-step-backward" title="first" aria-hidden="true"></span></a>
                </li>
            }
            @if (_page > _maxPages)
            {
                <li class="page-item">
                    <a class="page-link" @onclick=@(async () => SetPagerSize("back"))><span class="oi oi-media-skip-backward" title="back" aria-hidden="true"></span></a>
                </li>
            }
            @if (_endPage > 1)
            {
                <li class="page-item">
                    <a class="page-link" @onclick=@(async () => NavigateToPage("previous"))><span class="oi oi-chevron-left" title="previous" aria-hidden="true"></span></a>
                </li>
                @for (int i = _startPage; i <= _endPage; i++)
                {
                    var pager = i;
                    if (pager == _page)
                    {
                        <li class="page-item active">
                            <a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a>
                        </li>
                    }
                    else
                    {
                        <li class="page-item">
                            <a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a>
                        </li>
                    }
                }
                <li class="page-item">
                    <a class="page-link" @onclick=@(async () => NavigateToPage("next"))><span class="oi oi-chevron-right" title="next" aria-hidden="true"></span></a>
                </li>
            }
            @if (_endPage < _pages)
            {
                <li class="page-item">
                    <a class="page-link" @onclick=@(async () => SetPagerSize("forward"))><span class="oi oi-media-skip-forward" title="forward" aria-hidden="true"></span></a>
                </li>
            }
            @if (_endPage > 1)
            {
                <li class="page-item">
                    <a class="page-link" @onclick=@(async () => UpdateList(_pages))><span class="oi oi-media-step-forward" title="last" aria-hidden="true"></span></a>
                </li>
            }
            @if (_endPage > 1)
            {
                <li class="page-item disabled">
                    <a class="page-link">Page @_page of @_pages</a>
                </li>
            }
        </ul>
    }
    @if (Format == "Table")
    {
        <table class="@Class">
            <thead>
                <tr>@Header</tr>
            </thead>
            <tbody>
                @foreach (var item in ItemList)
                {
                    <tr>@Row(item)</tr>
                    @if (Detail != null)
                    {
                        <tr>@Detail(item)</tr>
                    }
                }
            </tbody>
        </table>
    }
    @if (Format == "Grid")
    {
        <div class="@Class">
            <div class="row">@Header</div>
            @foreach (var item in ItemList)
            {
                <div class="row">@Row(item)</div>
                @if (Detail != null)
                {
                    <div class="row">@Detail(item)</div>
                }
            }
        </div>
    }
    @if (Toolbar == "Bottom")
    {
        <ul class="pagination justify-content-center my-2">
            @if (_endPage > 1)
            {
                <li class="page-item">
                    <a class="page-link" @onclick=@(async () => UpdateList(1))><span class="oi oi-media-step-backward" title="first" aria-hidden="true"></span></a>
                </li>
            }
            @if (_page > _maxPages)
            {
                <li class="page-item">
                    <a class="page-link" @onclick=@(async () => SetPagerSize("back"))><span class="oi oi-media-skip-backward" title="back" aria-hidden="true"></span></a>
                </li>
            }
            @if (_endPage > 1)
            {
                <li class="page-item">
                    <a class="page-link" @onclick=@(async () => NavigateToPage("previous"))><span class="oi oi-chevron-left" title="previous" aria-hidden="true"></span></a>
                </li>
                @for (int i = _startPage; i <= _endPage; i++)
                {
                    var pager = i;
                    if (pager == _page)
                    {
                        <li class="page-item active">
                            <a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a>
                        </li>
                    }
                    else
                    {
                        <li class="page-item">
                            <a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a>
                        </li>
                    }
                }
                <li class="page-item">
                    <a class="page-link" @onclick=@(async () => NavigateToPage("next"))><span class="oi oi-chevron-right" title="next" aria-hidden="true"></span></a>
                </li>
            }
            @if (_endPage < _pages)
            {
                <li class="page-item">
                    <a class="page-link" @onclick=@(async () => SetPagerSize("forward"))><span class="oi oi-media-skip-forward" title="forward" aria-hidden="true"></span></a>
                </li>
            }
            @if (_endPage > 1)
            {
                <li class="page-item">
                    <a class="page-link" @onclick=@(async () => UpdateList(_pages))><span class="oi oi-media-step-forward" title="last" aria-hidden="true"></span></a>
                </li>
            }
            @if (_endPage > 1)
            {
                <li class="page-item disabled">
                    <a class="page-link">Page @_page of @_pages</a>
                </li>
            }
        </ul>
    }
</p>

@code {
    private int _pages = 0;
    private int _page = 1;
    private int _maxItems = 10;
    private int _maxPages = 5;
    private int _startPage = 0;
    private int _endPage = 0;

    [Parameter]
    public string Format { get; set; }

    [Parameter]
    public string Toolbar { get; set; }

    [Parameter]
    public RenderFragment Header { get; set; }

    [Parameter]
    public RenderFragment<TableItem> Row { get; set; }

    [Parameter]
    public RenderFragment<TableItem> Detail { get; set; }

    [Parameter]
    public IEnumerable<TableItem> Items { get; set; }

    [Parameter]
    public string PageSize { get; set; }

    [Parameter]
    public string DisplayPages { get; set; }

    [Parameter]
    public string Class { get; set; }

    private IEnumerable<TableItem> ItemList { get; set; }

    protected override void OnParametersSet()
    {
        if (string.IsNullOrEmpty(Format))
        {
            Format = "Table";
        }

        if (string.IsNullOrEmpty(Toolbar))
        {
            Toolbar = "Top";
        }

        if (string.IsNullOrEmpty(Class))
        {
            if (Format == "Table")
            {
                Class = "table table-borderless";
            }
            else
            {
                Class = "container";
            }
        }

        if (!string.IsNullOrEmpty(PageSize))
        {
            _maxItems = int.Parse(PageSize);
        }

        if (!string.IsNullOrEmpty(DisplayPages))
        {
            _maxPages = int.Parse(DisplayPages);
        }

        _page = 1;
        _startPage = 0;
        _endPage = 0;

        if (Items != null)
        {
            ItemList = Items.Skip((_page - 1) * _maxItems).Take(_maxItems);
            _pages = (int)Math.Ceiling(Items.Count() / (decimal)_maxItems);
        }

        SetPagerSize("forward");
    }

    public void UpdateList(int currentPage)
    {
        ItemList = Items.Skip((currentPage - 1) * _maxItems).Take(_maxItems);
        _page = currentPage;

        StateHasChanged();
    }

    public void SetPagerSize(string direction)
    {
        if (direction == "forward")
        {
            if (_endPage + 1 < _pages)
            {
                _startPage = _endPage + 1;
            }
            else
            {
                _startPage = 1;
            }

            if (_endPage + _maxPages < _pages)
            {
                _endPage = _startPage + _maxPages - 1;
            }
            else
            {
                _endPage = _pages;
            }

            StateHasChanged();
        }
        else if (direction == "back")
        {
            _endPage = _startPage - 1;
            _startPage = _startPage - _maxPages;
        }
    }

    public void NavigateToPage(string direction)
    {
        if (direction == "next")
        {
            if (_page < _pages)
            {
                if (_page == _endPage)
                {
                    SetPagerSize("forward");
                }
                _page += 1;
            }
        }
        else if (direction == "previous")
        {
            if (_page > 1)
            {
                if (_page == _startPage)
                {
                    SetPagerSize("back");
                }
                _page -= 1;
            }
        }

        UpdateList(_page);
    }
}