Ant Design Blazor Table 组件的 自定义分页样式, 显示全部记录数,ShowTotal

在 Ant Design Blazor 中，Table 组件的 ShowTotal 属性是一个泛型属性，它可以是两种类型之一：Func<PaginationTotalContext, string> 或 RenderFragment<PaginationTotalContext>。这个属性用于定义如何显示表格数据的总条数。

OneOf<T1, T2> 是一个特殊的类型，它表示这个属性可以是 T1 或 T2 中的任意一个类型。在这种情况下，ShowTotal 属性可以是 Func<PaginationTotalContext, string> 或 RenderFragment<PaginationTotalContext> 中的任意一个。

• Func<PaginationTotalContext, string> 是一个委托，它接受一个 PaginationTotalContext 对象作为参数，并返回一个字符串。这个字符串将作为分页信息中显示总条数的文本。

• RenderFragment<PaginationTotalContext> 是一个用于渲染 UI 的片段，它接受一个 PaginationTotalContext 对象作为参数。在这个片段中，你可以使用 Blazor 的渲染语法来创建任意复杂的 UI 来显示总条数。

以下是如何使用这两种方式来设置 ShowTotal 属性的示例：

使用 Func<PaginationTotalContext, string>:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

@using AntDesign;   <Table TItem="YourDataType"        DataSource="yourDataList"        @bind-PageIndex="currentPage"        @bind-PageSize="pageSize"        Total="totalItems"        ShowTotal=@(context => $"共 {context.Total} 条记录)">     <!-- 表格列定义 --> </Table>   @code {     private int currentPage = 1;     private int pageSize = 10;     private int totalItems = 50; // 假设有50条数据 }

　　

使用 RenderFragment<PaginationTotalContext>:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

@using AntDesign;   <Table TItem="YourDataType"        DataSource="yourDataList"        @bind-PageIndex="currentPage"        @bind-PageSize="pageSize"        Total="totalItems"        ShowTotal=@(context => (@<span>共 @context.Total 条记录</span>))">     <!-- 表格列定义 --> </Table>   @code {     private int currentPage = 1;     private int pageSize = 10;     private int totalItems = 50; // 假设有50条数据 }

　　

在这两个示例中，我们分别使用了 Func<PaginationTotalContext, string> 和 RenderFragment<PaginationTotalContext> 来设置 ShowTotal 属性，以显示数据的总条数。你可以根据你的需求选择任意一种方式来定制显示总条数的文本或 UI。