Blazor 数据列表分页逻辑实现教程

Blazor中实现数据列表分页需定义currentPage、pageSize、totalItems和paginatedData，通过Skip/Take切片获取当前页数据，计算totalPages并渲染页码导航，支持首页、上一页、下一页、末页跳转。

Blazor 中实现数据列表分页，核心是控制每页显示数量、当前页码、总条数，并配合 UI 触发页码切换。不依赖第三方组件也能轻松完成，关键是把“数据切片”和“页码状态管理”理清楚。

在组件（.razor）的 @code 块中声明几个必要字段：

用 C# 的 skip 和 take 最直接：

private List PaginatedData =>
    AllItems
        .Skip((currentPage - 1) * pageSize)
        .Take(pageSize)
        .ToList();

注意：AllItems 是完整数据源（可来自服务、内存列表或异步加载结果）。如果数据量大，建议后端分页；前端分页仅适用于总数可控（比如 ≤ 5000 条）的场景。

用循环渲染页码按钮，常见做法是显示「首页、上一页、123…、下一页、末页」。简化版可先做连续页码：

用户可能输入页码或点「上/下一页」，需加防护：

基本上就这些。不需要额外库，几行逻辑 + 简单 UI 就能跑起来。重点是把“页码→索引→切片”的映射写对，其余都是围绕它展开的交互补充。

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。