前端分页请求数据,前端删除n条数据后,再次请求

期望实现

  1. 前端分页请求服务端数据,页面渲染成列表
  2. 前端操作删除列表里一项或多项(一条或多条数据),页面立刻移除这一项或多项
  3. 前端再次分页请求服务端数据,列表正常显示

问题分析

一般来说,每次请求的数据条数 pageSize 是固定的,pageIndex1 开始。
移除项,相当于删除队列里的n项,后面的数据再向前移n项,所以需要根据 pageSize 和 删除的条数,重新计算当前 pageIndex
再次请求数据时,可能会请求到重复数据,所以需要处理返回的数据,避免重复渲染。

解决方案

  1. 设置变量对当前实际渲染的项进行计数,如 itemCount,初始值为 0
  2. 移除项,前端移除 domitemCount减1,计算新的 pageIndex
	itemCount--;
    pageIndex = Math.floor(itemCount / pageSize) + 1;
  1. 服务端返回数据后,移除重复的数据,更新itemCount
	const list = result.re;   // 列表数据
	list.splice(0, itemCount % pageSize);  // 移除重复数据
	itemCount += list.length;  // 更新itemCount

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

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

相关文章

我宣布!软考真的是0基础小白的福音

大家为什么觉得有的证书是智商税呢?无非就是证书含金量达不到企业对于人才的选拔标准,或是满足不了自身的职业发展需要。 但是一方面大家又知道,含金量高且企业认可度高的证书,要么是价格太贵,要不就是考试难度大&…

个人音乐播放网站项目(SpringBoot+Linux部署上线)

在做完第一个博客系统项目以后,接着做下一个项目:音乐播放网站项目,此项目应用的技术栈和第一个项目是差不多的,即算是学完SSM等知识以后的两个入门级Java开发项目吧。 此项目包含的核心功能有: 一、登录、注册、退出…

知了汇智携手西科大举办“知了杯”网络安全趣味赛,共筑网络空间安全防线

为积极响应国家网络空间安全人才战略,加快攻防兼备网络创新人才培养步伐,实现以赛促学、以赛促教、以赛促用,推动网络空间安全人才培养和产学研用生态发展,成都知了汇智科技有限公司(以下简称:知了汇智&…

随笔Ubuntu上的的一些使用

Ubuntu简易使用 常用指令 cdlsmkdirrf -rm 路径 换源 备份镜像 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak编辑文件设置 sudo gedit /etc/apt/sources.list清华源 # 阿里源 deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe mul…

数据库轻松切换:解读Spring中的AbstractRoutingDataSource

欢迎来到我的博客,代码的世界里,每一行都是一个故事 数据库轻松切换:解读Spring中的AbstractRoutingDataSource 前言AbstractRoutingDataSource介绍作用和优势:作用:优势: 使用 AbstractRoutingDataSource …

鬼手剪辑如何导入剪映草稿箱?含工程文件

鬼手剪辑导入剪映功能介绍 功能概述 鬼手剪辑导入剪映功能可以让您将鬼手剪辑翻译、克隆和一键解说等作品的工程文件导入到剪映草稿,以便通过剪映进行精细化调整。 推荐使用场景 视频二创 视频语音翻译 短剧解说等作品的微调 导出的工程文件包含以下元素 视频…

windows10小皮安装不同版本composer,实现自由切换使用

1、使用phpstudy小皮面板安装composer1.8.5和composer2.5.8两个版本; 2、打开刚才安装的composer安装目录:D:\phpstudy_pro\Extensions 3、打开composer1.8.5版本,修改composer.bat名称为composer1.8.5.bat: 4、打开composer2.5.8…

uniapp制作多选下拉框和富文本(短信页面)

实例 多选下拉框实现 http://t.csdnimg.cn/TNmcF 富文本实现 http://t.csdnimg.cn/Ei1iV

图解《图搜索算法》及代码实现

关注我,持续分享逻辑思维&管理思维; 可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导; 有意找工作的同学,请参考博主的原创:《面试官心得--面试前应该如何准备》,《面试官心得--面试时如何进行自…

STM32F4使用FPU/DSP核心启用与测试

STEP1、下载DSP库 具体链接如下: https://www.st.com/en/embedded-software/stsw-stm32065.html?dl9w6sdOSAKySFxBhN764Stg%3D%3D%2CIS1vzyA84KLAefK%2B0DawUl0FScREpiT6AdC3qFjIMJnCIgXIwr82G2XUFo6w43Wp5L5CUyrX3vZAoaHRE3nsTmRsArV3hnQOEgX73SKt8ss1vGrLlfXT24j…

indexDB 大图缓存

背景 最近在项目中遇到了一个问题:由于大屏背景图加载速度过慢,导致页面黑屏时间过长,影响了用户的体验。从下图可以看出加载耗时将近一分钟 IndexDB 主要的想法就是利用indexDB去做缓存,优化加载速度;在这之前&am…

VNISEdit 制作安装包

1. 环境依赖 1.1. NSIS 下载 下载地址:https://nsis.sourceforge.io/Download 1.2. VNISEdit 下载 下载地址1:https://sourceforge.net/projects/hmne/ 下载 exe 安装。 下载地址2:https://hmne.sourceforge.net/ 可以下载 exe 安装。也…

基础算法---前缀和

文章目录 基本思想1.前缀和2.子矩阵的和3.长度最小的子数组4,除自身以外数组的乘积总结 基本思想 前缀和数组就是一个数组的前i项和 前缀和的用处:前缀和数组求出来之后我们就可以就可以求数组中的某个特定区间的和 就比如说求l到R的和,我…

linux休眠唤醒流程,及示例分析

休眠流程 应用层通过echo mem > /sys/power/state写入休眠状态,给一张大概流程图 这个操作对应在kernel/power/main.c的state这个attr的store操作 static ssize_t state_store(struct kobject *kobj, struct kobj_attribute *attr,const char *buf, size_t n) …

网站想实现HTTPS访问需要有哪些步骤?

网站要实现HTTPS访问,以确保数据传输安全和提升用户信任度,主要需按以下步骤操作: 1. 购买或申请SSL证书: - 根据网站类型和需求,选择合适的SSL证书:DV(域名验证)、OV(组…

Maxwell安装使用和简单案例

一、解压 cd /opt/software/ ​ tar -zxvf maxwell-1.29.2.tar.gz -C /opt/module/ ​ cd /opt/module/ 二、MySQL 环境准备 1、修改 mysql 的配置文件 修改 mysql 的配置文件,开启 MySQL Binlog 设置 vi /etc/my.cnf 添加以下内容 server_id1 log-binmysql-…

冈萨雷斯数字图像处理资源(课后习题答案+代码+图片)

冈萨雷斯数字图像处理相关资源整理,资源全部来源互联网,方便大家下载 冈萨雷斯数字图像处理相关资源整理 课后习题 冈萨雷斯数字图像处理源代码

etcd campaign

1. 引言 本文主要讲解使用etcd进行选举的流程,以及对应的缺陷和使用场景 2. etcd选举流程 流程如以代码所示,流程为: clientv3.New 创建client与etcd server建立连接 concurrency.NewSession 创建选举的session,一般会配置ses…

微信小程序一到六章总结

第一章总结 认识微信小程序 小程序简介 微信(WeChat) 是腾讯公司于2011年1月21 日推出的一款为智能终端提供即时通信服务的应用程序。 小程序、订阅号、服务号、企业微信(企业号)属于微信公众平台的四大生态体系,它们面向不同的用户群体&…

Harmony OS应用开发性能优化全面指南

优化应用性能对于应用开发至关重要。通过高性能编程、减少丢帧卡顿、提升应用启动和响应速度,可以有效提升用户体验。本文将介绍一些优化应用性能的方法,以及常用的性能调优工具。 ArkTS高性能编程 为了提升代码执行速度,进而提升应用整体性…