
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>"
}
};
}
}