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

来源：这里教程网时间：2026-02-21 17:36:26 作者：

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

一、基础分页参数定义

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

currentPage：当前页码（从 1 开始更符合用户直觉） pageSize：每页显示条数（如 10、20） totalItems：数据总条数（通常来自 API 或服务） paginatedData：当前页要展示的数据子集（计算属性或方法返回）

二、计算当前页数据（切片逻辑）

用 C# 的 skip 和 take 最直接：

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

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

三、生成页码导航 UI

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

算出总页数：int totalPages = (int)Math.Ceiling(totalItems / (double)pageSize); 用 @for (int i = 1; i 渲染按钮 每个按钮绑定点击事件：@onclick="() => GoToPage(i)" GoToPage(int page) 方法里校验范围并更新 currentPage，再触发重新渲染

四、支持跳转与边界处理

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

跳转前判断：if (page totalPages) page = totalPages; 「上一页」逻辑：currentPage = Math.Max(1, currentPage - 1); 「下一页」逻辑：currentPage = Math.Min(totalPages, currentPage + 1); 修改 currentPage 后，Blazor 会自动重绘 PaginatedData 和页码栏

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