
Table 表格
用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。
分页表格
设置 IsPagination
显示分页组件
Demo
Loading...
显示在顶端
设置 ShowTopPagination
为 true
是顶端显示分页组件
Demo
Loading...
@page "/tables/pages"
<h3>Table 表格</h3>
<h4>用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。</h4>
<DemoBlock Title="分页表格" Introduction="设置 <code>IsPagination</code> 显示分页组件" Name="PaginationTable">
<Table TItem="Foo"
IsPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" />
<TableColumn @bind-Field="@context.Address" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="显示在顶端" Introduction="设置 <code>ShowTopPagination</code> 为 <code>true</code> 是顶端显示分页组件" Name="ShowTopPagination">
<Table TItem="Foo"
IsPagination="true" ShowTopPagination="true" PageItemsSource="@PageItemsSource" PageItems="10" OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" />
<TableColumn @bind-Field="@context.Address" />
</TableColumns>
</Table>
</DemoBlock>
// 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.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
namespace BootstrapBlazor.Shared.Samples.Table;
/// <summary>
/// Table 组件分页示例代码
/// </summary>
public partial class TablesPages
{
private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };
[NotNull]
private List<Foo>? Items { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Foo>? Localizer { get; set; }
/// <summary>
/// OnInitialized 方法
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Items = Foo.GenerateFoo(Localizer);
}
private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
{
IEnumerable<Foo> items = Items;
// 设置记录总数
var total = items.Count();
// 内存分页
items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
return Task.FromResult(new QueryData<Foo>()
{
Items = items,
TotalCount = total,
IsSorted = true,
IsFiltered = true,
IsSearch = true
});
}
}