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

7次阅读

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

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

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

一、基础分页参数定义

在组件(.razor)的 @code 块中声明几个必要字段:

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

二、计算当前页数据(切片逻辑)

用 C# 的 skiptake 最直接:

private List 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 就能跑起来。重点是把“页码→索引→切片”的映射写对,其余都是围绕它展开的交互补充。

星耀云
版权声明:本站原创文章,由 星耀云 2026-01-01发表,共计1072字。
转载说明:转载本网站任何内容,请按照转载方式正确书写本站原文地址。本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。
text=ZqhQzanResources