Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Pagination

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

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

Demo

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

Demo

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

Demo

Attributes

Loading...

Event

Loading...
@page "/paginations"
@inject IStringLocalizer<Paginations> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<Block Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]">
    <Pagination PageItems="3" PageItemsSource="@PageItems" TotalCount="30" OnPageClick="@OnPageClick" OnPageItemsChanged="@OnPageItemsChanged"></Pagination>
    <BlockLogger @ref="Trace" class="mt-3" />
</Block>

<Block Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]">
    <Pagination PageItems="20" TotalCount="1"></Pagination>
</Block>

<Block Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]">
    <Pagination PageItems="20" TotalCount="100" ShowPaginationInfo="false"></Pagination>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Paginations
    {
        private BlockLogger? Trace { get; set; }

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

        private Task OnPageItemsChanged(int pageItems)
        {
            Trace?.Log($"PageItems: {pageItems}");
            return Task.CompletedTask;
        }

        private IEnumerable<int> PageItems => new int[] { 3, 10, 20, 40 };

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            new AttributeItem() {
                Name = "PageIndex",
                Description = Localizer["Desc1"]!,
                Type = "int",
                ValueList = " — ",
                DefaultValue = "1"
            },
            new AttributeItem() {
                Name = "PageItems",
                Description = Localizer["Desc2"]!,
                Type = "int",
                ValueList = " — ",
                DefaultValue = "—"
            },
            new AttributeItem() {
                Name = "PageItemsSource",
                Description = Localizer["Desc3"]!,
                Type = "IEnumerable<int>",
                ValueList = " — ",
                DefaultValue = "—"
            },
            new AttributeItem() {
                Name = "ShowPaginationInfo",
                Description = Localizer["Desc4"]!,
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "TotalCount",
                Description = Localizer["Desc4"]!,
                Type = "int",
                ValueList = " — ",
                DefaultValue = "—"
            },
        };

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "OnPageClick",
                Description= Localizer["Event1"]!,
                Type ="Action<int, int>"
            },
            new EventItem()
            {
                Name = "OnPageItemsChanged",
                Description= Localizer["Event2"]!,
                Type ="Action<int>"
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload