Blazor分页推荐服务端实现，通过page和pageSize参数按需获取数据，配合Pagination组件封装页码逻辑；客户端分页仅适用于小数据量，用LINQ切片处理。需注意滚动重置、按钮禁用、输入校验及加载状态。
Blazor 实现分页功能，核心是控制每页显示的数据量 + 当前页码 + 总数据条数，再配合 UI 交互（上一页、下一页、跳转页码等）更新显示内容。服务端分页更常用也更高效，客户端分页适合小数据量快速预览。
服务端分页（推荐）
从后端 API 按需拉取当前页数据，避免一次性加载大量数据，性能好、内存占用低。
- 后端接口需支持 page（页码） 和 pageSize（每页条数） 参数，返回分页结果（如
TotalCount、Items） - Blazor 组件中定义状态：
int currentPage = 1;、int pageSize = 10;、List、items = new(); int totalCount = 0; - 用
HttpClient调用接口，例如：var result = await http.GetFromJsonAsync>($"/api/products?page={currentPage}&pageSize={pageSize}"); - 计算总页数：
int totalPages = (int)Math.Ceiling((double)totalCount / pageSize);
前端分页（适合小数据）
一次性获取全部数据，在前端按页切片展示，简单但不适用于成百上千条记录。
- 先加载完整列表：
allItems = await http.GetFromJsonAsync- >("/api/products");
- 用 LINQ 切片：
items = allItems.Skip((currentPage - 1) * pageSize).Take(pageSize).ToList(); - 总条数直接取
allItems.Count，总页数同上
分页 UI 组件（可复用）
用一个独立的 Pagination.razor 组件封装翻页逻辑，通过 EventCallback 通知父组件页码变化：
I-Shop购物系统
下载
部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/
- 接收参数：
[Parameter] public int CurrentPage { get; set; }、[Parameter] public int TotalPages { get; set; }、[Parameter] public EventCallbackPageChanged { get; set; } - 生成页码按钮（带省略逻辑，如 1 … 5 6 7 8 9 … N）
- 点击页码时触发：
await PageChanged.InvokeAsync(newPage);
注意事项
分页不是只改数据显示，几个细节容易踩坑：
- 页码变更后记得重置滚动位置（比如回到列表顶部），可用
JSRuntime.InvokeVoidAsync("scrollTo", 0, 0); - 禁用无效按钮：首页/上一页在
CurrentPage == 1时禁用；末页/下一页在CurrentPage == TotalPages时禁用 - 输入框跳转页码要做校验（非数字、超范围、空值），防止请求异常
- 加载中状态建议加
IsLoading变量 + Skeleton 或 spinner，提升体验
基本上就这些。服务端分页是主流做法，搭配一个干净的 UI 组件，就能稳定支撑各类数据列表场景。
