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

夜婷大大_3414

夜婷大大_3414

2026-01-02

516人浏览

原创

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

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

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();</item>

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

创意前端视觉设计
创意前端视觉设计

在创建或重塑需要独特视觉方向、应避免通用 AI 生成审美的网站、落地页、仪表盘、UI 组件、海报或应用时使用。

下载

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

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

前端 c# 异步加载 重绘

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.08.02

6879

3

int占多少字节
int占多少字节

int占4个字节,意味着一个int变量可以存储范围在-2,147,483,648到2,147,483,647之间的整数值,在某些情况下也可能是2个字节或8个字节,int是一种常用的数据类型,用于表示整数,需要根据具体情况选择合适的数据类型,以确保程序的正确性和性能。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.08.29

3305

6

c++怎么把double转成int
c++怎么把double转成int

本专题整合了 c++ double相关教程,阅读专题下面的文章了解更多详细内容。

2025.08.29

4308

10

C++中int的含义
C++中int的含义

本专题整合了C++中int相关内容,阅读专题下面的文章了解更多详细内容。

2025.08.29

2925

10

c++怎么把double转成int
c++怎么把double转成int

本专题整合了 c++ double相关教程,阅读专题下面的文章了解更多详细内容。

2025.08.29

4308

10

C++中int、float和double的区别
C++中int、float和double的区别

本专题整合了c++中int和double的区别,阅读专题下面的文章了解更多详细内容。

2025.10.23

824

4

go语言 数组和切片
go语言 数组和切片

本专题整合了go语言数组和切片的区别与含义,阅读专题下面的文章了解更多详细内容。

2025.09.03

1972

14

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

2026.10.28

60

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

2026.10.28

40

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程