AntDesignBlazor示例——分页查询

本示例是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/

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

腾讯云Linux云服务器禁Ping设置

腾讯云Linux服务器默认是允许ping包的,但是在一些情况下为了安全考虑起见,我们都会把服务器设置为禁ping的模式。 1、首先检查Linux服务器当前是否禁ping 执行命令: cat /proc/sys/net/ipv4/icmp_echo_ignore_all 备注: 0----代…

【️如何理解面向对象和面向过程】

✅如何理解面向对象和面向过程? 典型理解✅扩展知识仓✅面向对象的三大基本特征✅封装✅继承✅多态 ✅为什么Java不支持多继承?✅菱形继承问题✅Java 8 中的多继承 ✅面向对象的五大基本原则? 典型理解 面向过程把问题分解成一个一个步骤&…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《耦合碳-绿证-消纳量市场的日前电量市场交易交互式优化》

这个标题描述了一种优化模型或算法,用于在日前电量市场中耦合碳排放权市场、可再生能源绿色证书市场和消纳量市场进行交易的交互式优化。我将解析标题的关键词和概念: 日前电量市场:指的是电力市场中进行短期调度和交易的市场,其…

ES6 面试题 | 11.精选 ES6 面试题

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

vue-element-admin如何把mock换成使用真实后台接口

1)修改vue.config.js文件 use strict const path require(path) const defaultSettings require(./src/settings.js)function resolve(dir) {return path.join(__dirname, dir) }const name defaultSettings.title || vue Element Admin // page title// If you…

C++相关闲碎记录(15)

1、string字符串 #include <iostream> #include <string> using namespace std;int main (int argc, char** argv) {const string delims(" \t,.;");string line;// for every line read successfullywhile (getline(cin,line)) {string::size_type beg…

带你亲证AI应用开发的“奇点”时刻

带你亲证AI应用开发的“奇点”时刻 AI 应用开发——新的历史节点 事实上&#xff0c;没有任何一种突破能够不经历重重失败&#xff0c;不体验一轮轮的痛苦&#xff0c;就能直接展现在人类面前。AI 技术自诞生之初直至今日&#xff0c;其发展之路从未一帆风顺——辉煌与寒冬交…

SLAM算法与工程实践——相机篇:传统相机使用(1)

SLAM算法与工程实践系列文章 下面是SLAM算法与工程实践系列文章的总链接&#xff0c;本人发表这个系列的文章链接均收录于此 SLAM算法与工程实践系列文章链接 下面是专栏地址&#xff1a; SLAM算法与工程实践系列专栏 文章目录 SLAM算法与工程实践系列文章SLAM算法与工程实践…

Leetcode的AC指南 —— 链表:19.删除链表的倒数第N个节点

摘要&#xff1a; Leetcode的AC指南 —— 链表&#xff1a;19.删除链表的倒数第N个节点。题目介绍&#xff1a;给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 文章目录 一、题目二、解析1、滑动窗口/快慢指针&#xff08;傻傻分不清&…

平均数 C语言xdoj66

问题描述 计算n个整数&#xff08;x1,x2,x3...&#xff09;的平均数&#xff0c;结果保留两位小数。 输入说明 第一行为整数n&#xff08;1 < n <100&#xff09;&#xff0c;接下来是n个整数(0 < x1,x2,x3....< 2^31 - 1)。 输出说明 输出这n个整数的…

netty-daxin-2(netty常用事件讲解)

文章目录 netty常用事件讲解ChannelHandler接口ChannelHandler适配器类ChannelInboundHandler 子接口Channel 的状态调用时机ChannelHandler 生命周期示例NettServer&CustomizeInboundHandlerNettyClient测试分析 ChannelInboundHandlerAdapter适配器类SimpleChannelInboun…

C# 如何控制多线程同步执行

写在前面 使用Task类来控制多线程的同步执行&#xff0c;可应用于多任务分发执行后&#xff0c;再做归并处理。Tas既拥有线程池的优点&#xff0c;同时也解决了使用ThreadPool不易控制的弊端&#xff1b;可以非常简便并可靠地实现多线程的顺序执行。 代码实现 public class …

qt中通过objectName来查找控制,使用控件(QString名字)

先拖个控件&#xff0c;名字为label_1,然后执行如下操作&#xff1a; QString objectName QString("label_1");QLabel *tempLabel this->findChild<QLabel*>(objectName);tempLabel->setText("123");

钉钉 × E签宝,打通系统屏障,实现钉钉审批通过后自动同步到E签宝发起签署并返回拖章链接全流程自动化

1 场景描述 成熟的业务体系需要用户的优质体验和高效的交易效率来支撑。而合同作为双方业务往来的法律保证&#xff0c;签合同已成为目前企业必不可少的重要一环。但传统的签署场景中&#xff0c;传统纸质合同的签署往往采用线下见面或邮寄的方式进行&#xff0c;不仅流程复杂&…

C++使用UDP

C使用UDP 对C使用UDP做了简单封装&#xff0c;可直接运行 头文件udp.h #pragma once #include <Winsock.h> #pragma comment(lib,"WS2_32.lib")#define LOCAL_IP_ADDR INADDR_ANY //当前应用程序接收的IP地址 #define LOCAL_PORT 9527 …

【笔试强化】Day 4

文章目录 一、单选1.2.3.4.5.6.7. 二、不定项选择1.2.3. 三、编程1. 计算糖果题解&#xff1a;代码&#xff1a; 2. 进制转换题解&#xff1a;代码&#xff1a; 一、单选 1. 正确答案&#xff1a;D队列先进先出 A&#xff1a;栈有关 B&#xff1a;错 C&#xff1a;错 2. 正确…

二叉树遍历

今天讲的不是 leetcode 上的题&#xff0c;但也和二叉树有关&#xff0c;一道比较有意思的题 牛客网上的题&#xff0c;如果看懂了&#xff0c;也可以来试着做一下&#xff1a; 二叉树遍历_牛客题霸_牛客网 (nowcoder.com) 题目 编一个程序&#xff0c;读入用户输入的一串先…

VGG(pytorch)

VGG:达到了传统串型结构深度的极限 学习VGG原理要了解CNN感受野的基础知识 model.py import torch.nn as nn import torch# official pretrain weights model_urls {vgg11: https://download.pytorch.org/models/vgg11-bbd30ac9.pth,vgg13: https://download.pytorch.org/mo…

WEB 3D技术 简述React Hook/Class 组件中使用three.js方式

之前 已经讲过了 用vue结合three.js进行开发 那么 自然是少不了react 我们 还是先创建一个文件夹 终端执行 npm init vitelatest输入一下项目名称 然后技术选择 react 也不太清楚大家的基础 那就选择最简单的js 然后 我们就创建完成了 然后 我们用编辑器打开创建好的项目目…

卷积的计算 - im2col 2

卷积的计算 - im2col 2 flyfish import numpy as np np.set_printoptions(linewidth200)# F filter kerneldef im2col(images, kernel_size, stride1, padding0):#process imagesif images.ndim 2:images images.reshape(1, 1, *images.shape)elif images.ndim 3:N, I_…