AntDesignBlazor示例——分页查询

news2024/9/21 8:01:47

本示例是AntDesign Blazor的入门示例,在学习的同时分享出来,以供新手参考。

示例代码仓库:https://gitee.com/known/BlazorDemo

1. 学习目标

  • 分页查询框架
  • 天气数据分页功能
  • 表格自定义分页

2. 创建分页查询框架

Table组件分页默认为前端分页,即所有数据一次性加载到前端进行分页;在实际项目中,大多数都是后端分页,即根据前端提供的分页参数只查询一页数据返回给前端显示。下面我们搭建一个简易的分页查询框架:

1)添加新类库项目,命名为BlazorDemoCore,为什么要新建类库项目?

  • 一是查询框架是通用的,所有项目都可以使用
  • 二是将框架封装在类库中,便于其他项目引用
  • 三是框架代码与项目代码隔离,避免被篡改

image

2)查询条件类

在类库BlazorDemoCore中添加查询条件类PagingCriteria,该类用于前端封装查询条件参数传递给后端,后端根据该类信息从数据库中查询分页数据给前端显示。

image

3)查询结果类

在类库BlazorDemoCore中添加查询结果类PagingResult,该类用于后端将查询结果封装起来传递给前端,前端根据该类信息分页显示。该类提供泛型,泛型类型为每条数据的类型。

image

3. 修改天气数据后端查询

1)首先在AntDesignDemo项目中引用框架项目BlazorDemoCore,右击项目添加项目引用,引用后项目文件内容如下:

image

2)双击WeatherService类文件,修改天气数据查询方法,方法参数改成查询条件,返回值改成查询结果。

image

4. 修改天气数据前端分页功能

1)双击_Imports.razor文件添加框架命名空间。

image

2)双击Weather.razor文件,删除如下几行代码。

image

3)修改Table组件属性,绑定分页参数和查询结果,添加分页事件OnChange的同时必须添加TItem属性。

image

4)添加表格分页查询事件,将页码和每页大小赋给查询条件,修改查询方法和默认查询条件。

image

5)修改完成,点击运行按钮查看运行效果。

image

5. 表格分页自定义样式

Table组件分页默认显示在左下角,下面介绍如何显示在有下角,并且显示总条数,改变每页大小和快速跳转某页。

1)显示在右下角,在Table组件上添加属性PaginationPosition="bottomRight"即可,运行效果如下

image

2)若要显示总条数及切换每页大小和快速跳转,则要隐藏默认分页,使用分页模板来实现。

  • PropertyColumn移到ChildContent
  • 添加PaginationTemplate,在其内部添加Pagination组件
  • 显示总条数,添加ShowTotal属性
  • 显示切换每页大小,添加ShowSizeChanger属性
  • 显示快速跳转页码,添加ShowQuickJumper属性

image

3)修改完成,点击运行按钮查看运行效果。

image

6. 视频

https://www.bilibili.com/video/BV19b4y157bk/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1316662.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《科技风》期刊发表投稿方式、收稿方向

《科技风》杂志是经国家新闻出版总署批准,河北省科学技术协会主管,河北省科技咨询服务中心主办的国内公开发行的大型综合类科技期刊。 该刊集科技性、前瞻性、创新性和专业性于一体,始终以“把脉科技创新 引领发展风尚”为办刊宗旨&#xff…

回归预测 | MATLAB实现NGO-SCN北方苍鹰算法优化随机配置网络的数据回归预测 (多指标,多图)

回归预测 | MATLAB实现NGO-SCN北方苍鹰算法优化随机配置网络的数据回归预测 (多指标,多图) 目录 回归预测 | MATLAB实现NGO-SCN北方苍鹰算法优化随机配置网络的数据回归预测 (多指标,多图)效果一览基本介绍…

crmeb v5新增一个功能的完整示例记录

首先,需求 工作中的二开需求是这样的,修改首页的装修,并新增回收报价的功能 开始动手 第一步,我们要到后面的管理界面,去装修中修改首面的展示 首页的页面配置好之后,就要在 前端的展示程序中 配置相…

【音视频 | H.264】H.264视频编码及NALU详解

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

ChatGPT在指尖跳舞: open-interpreter实现本地数据采集、处理一条龙

原文:ChatGPT在指尖跳舞: open-interpreter实现本地数据采集、处理一条龙 - 知乎 目录 收起 Part1 前言 Part2 Open - Interpreter 简介 Part3 安装与运行 Part4 工作场景 1获取网页内容 2 pdf 文件批量转换 3 excel 文件合并 Part5总结 参考资料 往期推…

nodejs+vue+微信小程序+python+PHP校园二手交易系统的设计与实现-计算机毕业设计推荐

(2)管理员 进行维护,以及平台的后台管理工作都依靠管理员,其可以对信息进行管理。需具备功能有;首页、个人中心、学生管理、物品分类管理、物品信息管理、心愿贴、系统管理、订单管理等功能。系统分成管理员控制模块和学生模块。 本系统有良好…

极坐标下的牛拉法潮流计算39节点MATLAB程序

微❤关注“电气仔推送”获得资料(专享优惠) 潮流计算: 潮流计算是根据给定的电网结构、参数和发电机、负荷等元件的运行条件,确定电力系统各部分稳态运行状态参数的计算。通常给定的运行条件有系统中各电源和负荷点的功率、枢纽…

飞翔的鸟。

一.准备工作 首先创建一个新的Java项目命名为“飞翔的鸟”,并在src中创建一个包命名为“com.qiku.bird",在这个包内分别创建4个类命名为“Bird”、“BirdGame”、“Column”、“Ground”,并向需要的图片素材导入到包内。 二.代码呈现 pa…

Flask学习三:模型操作

ORM flask 通过Model操作数据库,不管你的数据库是MySQL还是Sqlite,flask自动帮你生成相应数据库类型的sql语句,所以不需要关注sql语句和类型,对数据的操作flask帮我们自动完成,只需要会写Model就可以了 flask使用对象关…

105基于matlab的阶次分析算法

基于matlab的阶次分析算法,用于变转速机械故障特征提取,可运行,包含寻找脉冲时刻,等角度时刻。数据可更换自己的,程序已调通,可直接运行。 105阶次分析变转速信号处理 (xiaohongshu.com)

Java 基础学习(十一)File类与I/O操作

1 File类 1.1 File类概述 1.1.1 什么是File类 File是java.io包下作为文件和目录的类。File类定义了一些与平台无关的方法来操作文件,通过调用File类中的方法可以得到文件和目录的描述信息,包括名称、所在路径、读写性和长度等,还可以对文件…

『K8S 入门』二:深入 Pod

『K8S 入门』二:深入 Pod 一、基础命令 获取所有 Pod kubectl get pods2. 获取 deploy kubectl get deploy3. 删除 deploy,这时候相应的 pod 就没了 kubectl delete deploy nginx4. 虽然删掉了 Pod,但是这是时候还有 service&#xff0c…

时序预测 | Python实现CNN-LSTM电力需求预测

时序预测 | Python实现CNN-LSTM电力需求预测 目录 时序预测 | Python实现CNN-LSTM电力需求预测预测效果基本描述程序设计参考资料预测效果 基本描述 该数据集因其每小时的用电量数据以及 TSO 对消耗和定价的相应预测而值得注意,从而可以将预期预测与当前最先进的行业预测进行比…

C语言:猜数字游戏

#include<stdio.h> #include<time.h> #include<stdlib.h> void menu() {printf("********************************\n");printf("****** 1.开始 2.退出 ******\n");printf("********************************\n"); } voi…

【Linux】驱动

驱动 驱动程序过程 系统调用 用户空间 内核空间 添加驱动和调用驱动 驱动程序是如何调用设备硬件 驱动 在计算机领域&#xff0c;驱动&#xff08;Driver&#xff09;是一种软件&#xff0c;它充当硬件设备与操作系统之间的桥梁&#xff0c;允许它们进行通信和协同工作。驱动程…

基于linux系统的Tomcat+Mysql+Jdk环境搭建(三)centos7 安装Tomcat

Tomcat下载官网&#xff1a; Apache Tomcat - Which Version Do I Want? JDK下载官网&#xff1a; Java Downloads | Oracle 中国 如果不知道Tomcat的哪个版本应该对应哪个版本的JDK可以打开官网&#xff0c;点击Whitch Version 下滑&#xff0c;有低版本的&#xff0c;如…

Android studio中文汉化教程

相比于jetbrains的软件直接在软件内搜索chinese 就可以找到中文包相比&#xff0c;Android studio需要手动安装&#xff0c;接下来就给大家介绍下如何汉化 一、确认版本号 根据版本下载对应的中文汉化包&#xff0c;如果安装的汉化包版本不对应&#xff0c;可能会导致安装失败。…

前端视角看 Docker :在国内的基础配置教程(含国内镜像源)

引言 在国内使用Docker时&#xff0c;直接从Docker Hub拉取镜像可能会遇到网络速度慢的问题。配置国内的镜像加速器可以显著提升拉取速度。本教程将指导您完成安装Docker后的基础配置&#xff0c;特别是设置国内镜像加速器。 1. 安装Docker 确保您已在系统上安装Docker。根…

LCR 180. 文件组合

解题思路&#xff1a; 利用滑动窗口 class Solution {public int[][] fileCombination(int target) {int i 1; // 滑动窗口的左边界int j 1; // 滑动窗口的右边界int sum 0; // 滑动窗口中数字的和List<int[]> res new ArrayList<>();while (i < target / …

Kafka-Kafka核心参数详解

Kafka的HighLevel API使用是非常简单的&#xff0c;所以梳理模型时也要尽量简单化&#xff0c;主线清晰&#xff0c;细节慢慢扩展。 Kafka提供了两套客户端API&#xff0c;HighLevel API和LowLevel API。 HighLevel API封装了kafka的运行细节&#xff0c;使用起来比较简单&…