Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Pagination

When there is too much data, use paging to break down the data.

Basic usage

You can select the amount of data displayed per page by the drop-down box

Demo

<Pagination PageCount="30" OnPageLinkClick="@OnPageClick" />
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    private Task OnPageClick(int pageIndex)
    {
        Trace.Log($"PageIndex: {pageIndex}");
        return Task.CompletedTask;
    }
}

Only text prompts are displayed

Only one page does not display the switch page number component, only text prompts

Demo

<Pagination PageCount="1" />

Only paginated components are displayed

By ShowPaginationInfo = 'false' setting does not display text prompts

Demo

<Pagination PageCount="2000" MaxPageLinkCount="10" />

Alignment

Set Alignment contorl the pagination alginment

Demo

Start

Center

End

<RadioList @bind-Value="Alignment" Items="AlignmentItems" />
<Pagination PageCount="20" Alignment="@Alignment" class="mt-3" />

@code {
    private Alignment Alignment { get; set; } = Alignment.Right;

    [NotNull]
    private List<SelectedItem>? AlignmentItems { get; set; }

    /// <summary>
    /// <inheritdoc/>
    /// </summary>
    protected override void OnParametersSet()
    {
        base.OnParametersSet();

        AlignmentItems ??= new List<SelectedItem>()
        {
            new("Left", "Start"),
            new("Center", "Center"),
            new("Right", "End")
        };
    }
}

Goto navigator

Set ShowGotoNavigator show/hide the Goto，can GotoTemplate custom the Goto navigator

Demo

<Pagination PageCount="20" ShowGotoNavigator="true" />

Pager info

Set ShowInfo show/hide the pager info

Demo

<Pagination PageCount="20" ShowPageInfo="true" PageInfoText="共 20 页" ShowGotoNavigator="true" />

Pager info template

Set PageInfoTemplate curstom the template of page info

Demo

<Pagination PageCount="@PageCount" ShowPageInfo="true" ShowGotoNavigator="true">
    <PageInfoTemplate>
        <div class="page-info me-2">@PageInfoText</div>
        <Select @bind-Value="PageItems" Items="PageItemsSource" style="width: 120px;" />
    </PageInfoTemplate>
</Pagination>

@code {
    [NotNull]
    private List<SelectedItem>? PageItemsSource { get; set; }

    private int PageItems { get; set; } = 2;

    private int PageCount => 200 / PageItems;

    private string PageInfoText => $"每页 {PageItems} 条 共 {PageCount} 页";

    /// <summary>
    /// <inheritdoc/>
    /// </summary>
    protected override void OnParametersSet()
    {
        base.OnParametersSet();

        PageItemsSource = new List<SelectedItem>()
        {
            new("2", "2条/页"),
            new("4", "4条/页"),
            new("10", "10条/页"),
            new("20", "20条/页")
        };
    }
}

Attributes

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Pagination

When there is too much data, use paging to break down the data.

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01