Blazor 怎么实现分页功能

来源:这里教程网 时间:2026-02-21 17:39:30 作者:

Blazor 实现分页功能,核心是控制每页显示的数据量 + 当前页码 + 总数据条数,再配合 UI 交互(上一页、下一页、跳转页码等)更新显示内容。服务端分页更常用也更高效,客户端分页适合小数据量快速预览。

服务端分页(推荐)

从后端 API 按需拉取当前页数据,避免一次性加载大量数据,性能好、内存占用低。

后端接口需支持 page(页码)pageSize(每页条数) 参数,返回分页结果(如
TotalCount
Items
Blazor 组件中定义状态:
int currentPage = 1;
int pageSize = 10;
List<t> items = new();</t>
int totalCount = 0;
HttpClient
调用接口,例如:
var result = await http.GetFromJsonAsync<pagedresult>>($"/api/products?page={currentPage}&pageSize={pageSize}");</pagedresult>
计算总页数:
int totalPages = (int)Math.Ceiling((double)totalCount / pageSize);

前端分页(适合小数据)

一次性获取全部数据,在前端按页切片展示,简单但不适用于成百上千条记录。

先加载完整列表:
allItems = await http.GetFromJsonAsync<list>>("/api/products");</list>
用 LINQ 切片:
items = allItems.Skip((currentPage - 1) * pageSize).Take(pageSize).ToList();
总条数直接取
allItems.Count
,总页数同上

分页 UI 组件(可复用)

用一个独立的

Pagination.razor
组件封装翻页逻辑,通过
EventCallback
通知父组件页码变化:

接收参数:
[Parameter] public int CurrentPage { get; set; }
[Parameter] public int TotalPages { get; set; }
[Parameter] public EventCallback<int> PageChanged { get; set; }</int>
生成页码按钮(带省略逻辑,如 1 … 5 6 7 8 9 … N) 点击页码时触发:
await PageChanged.InvokeAsync(newPage);

注意事项

分页不是只改数据显示,几个细节容易踩坑:

页码变更后记得重置滚动位置(比如回到列表顶部),可用
JSRuntime.InvokeVoidAsync("scrollTo", 0, 0);
禁用无效按钮:首页/上一页在
CurrentPage == 1
时禁用;末页/下一页在
CurrentPage == TotalPages
时禁用
输入框跳转页码要做校验(非数字、超范围、空值),防止请求异常 加载中状态建议加
IsLoading
变量 + Skeleton 或 spinner,提升体验

基本上就这些。服务端分页是主流做法,搭配一个干净的 UI 组件,就能稳定支撑各类数据列表场景。

相关推荐