Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Pagination 分页

当数据量过多时,使用分页分解数据。

基础用法

可以通过下拉框选取每页显示数据数量

Demo

仅显示文本提示

只有一页时不显示切换页码组件,仅显示文本提示

Demo

仅显示分页组件

通过 ShowPaginationInfo="false" 设置不显示文本提示

Demo

Attributes

Loading...

事件 Events

Loading...
@page "/paginations"

<h3>Pagination 分页</h3>

<h4>当数据量过多时,使用分页分解数据。</h4>

<Block Title="基础用法" Introduction="可以通过下拉框选取每页显示数据数量">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Pagination PageItems="3" PageItemsSource="@PageItems" TotalCount="30" OnPageClick="@OnPageClick" OnPageItemsChanged="@OnPageItemsChanged"></Pagination>
            </div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="仅显示文本提示" Introduction="只有一页时不显示切换页码组件,仅显示文本提示">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Pagination PageItems="20" TotalCount="1"></Pagination>
            </div>
        </div>
    </div>
</Block>

<Block Title="仅显示分页组件" Introduction='通过 <code>ShowPaginationInfo="false"</code> 设置不显示文本提示'>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Pagination PageItems="20" TotalCount="100" ShowPaginationInfo="false"></Pagination>
            </div>
        </div>
    </div>
</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 Logger? 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 = "当前页码",
                Type = "int",
                ValueList = " — ",
                DefaultValue = "1"
            },
            new AttributeItem() {
                Name = "PageItems",
                Description = "每页显示数据数量",
                Type = "int",
                ValueList = " — ",
                DefaultValue = "—"
            },
            new AttributeItem() {
                Name = "PageItemsSource",
                Description = "每页显示数据数量的外部数据源",
                Type = "IEnumerable<int>",
                ValueList = " — ",
                DefaultValue = "—"
            },
            new AttributeItem() {
                Name = "ShowPaginationInfo",
                Description = "是否显示分页数据汇总信息",
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "TotalCount",
                Description = "数据总数",
                Type = "int",
                ValueList = " — ",
                DefaultValue = "—"
            },
        };

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "OnPageClick",
                Description="第一个参数是当前页码,第二个参数是当前每页设置显示的数据项数量",
                Type ="Action<int, int>"
            },
            new EventItem()
            {
                Name = "OnPageItemsChanged",
                Description="点击设置每页显示数据数量时回调方法",
                Type ="Action<int>"
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload