前端分页请求数据,前端删除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.mzph.cn/bicheng/2697.shtml

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

相关文章

L1-099 帮助色盲 - java

L1-099 帮助色盲 代码长度限制 16 KB 时间限制 400 ms 内存限制 64 MB 栈限制 8192 KB 题目描述: 在古老的红绿灯面前,红绿色盲患者无法分辨当前亮起的灯是红色还是绿色,有些聪明人通过路口的策略是这样的:当红灯或绿灯亮起时&am…

WebServer项目介绍文章【四叶专属】

Linux项目实战C轻量级Web服务器源码分析TinyWebServer 书接上文,学习开源项目的笔记没想到居然有不少阅读量,后面结合另一个前端开源项目简单做了点修改,没想到居然有需要的同学,那么我就专门为四叶开一篇文章吧,【源码…

抢先看!美团、京东、360等大厂面试题解析,技术面试必备。

技术面试必备!美团、京东、360等大厂面试题详解,让你轻松应对各大公司面试挑战! 往期硬核面经 哦耶!冲进腾讯了! 牛逼!上岸腾讯互娱和腾讯TEG! 腾讯的面试,强度拉满! …

【c++】探究C++中的list:精彩的接口与仿真实现解密

🔥个人主页:Quitecoder 🔥专栏:c笔记仓 朋友们大家好,本篇文章来到list有关部分,这一部分函数与前面的类似,我们简单讲解,重难点在模拟实现时的迭代器有关实现 目录 1.List介绍2.接…

【网络安全】跨站脚本攻击(XSS)

专栏文章索引:网络安全 有问题可私聊:QQ:3375119339 目录 一、XSS简介 二、XSS漏洞危害 三、XSS漏洞类型 1.反射型XSS 2.存储型XSS 3.DOM型XSS 四、XSS漏洞防御 一、XSS简介 XSS(Cross-Site Scripting) XSS 被…

信奥之路(三)——判断语句if

1.if语句 判断结构要求程序员指定一个或多个要评估或测试的条件,以及条件为真时要执行的语句(必需的)和条件为假时要执行的语句。 C 编程语言提供了以下类型的判断语句。点击链接查看每个语句的细节: if 语句:一个 if …

设计模式(019)行为型之状态模式

状态模式是一种行为型设计模式,它允许对象在内部状态发生变化时改变它的行为,使得对象在不同状态下有不同的行为表现,而且可以方便地添加新的状态而不必修改已有的代码。 1、场景设计 实现场景:对状态A和状态B做出不同的处理。 …

Git merge的版本冲突实验

实验目的 发现 两个分支的 相同文件 怎样被修改 才会发生冲突? 实验过程 1.初始状态 现在目前有1.py、2.py两个文件,已经被git管理。现在我想制造冲突,看怎样的修改会发生冲突,先看怎么不会发生冲突。 目前仓库里的版本是这样…

C++ //练习 13.11 为前面练习中的HasPtr类添加一个析构函数。

C Primer(第5版) 练习 13.11 练习 13.11 为前面练习中的HasPtr类添加一个析构函数。 环境:Linux Ubuntu(云服务器) 工具:vim 代码块 class HasPtr{ public:HasPtr(const std::string &s std::stri…

C语言实现简单CRC校验

目录 一、实现题目 二、send模块 三、receive模块 四、运行截图 一、实现题目 二、send模块 #include <stdio.h> #include <string.h>// 执行模2除法&#xff0c;并计算出余数&#xff08;CRC校验码&#xff09; //dividend被除, divisor除数 void divide…

免费SSL证书和付费SSL证书区别在哪

免费SSL证书与付费SSL证书在多个方面存在差异&#xff0c;这些差异主要体现在认证级别、保障金额以及服务范围上。在以下几个方面存在显著区别&#xff1a; 1、验证类型和信任级别&#xff1a; 免费SSL证书&#xff1a;通常只提供域名验证&#xff08;DV&#xff09;级别的证…

实验:使用apache + yum实现自制yum仓库

实验准备 Web服务器端&#xff1a;cenos-1&#xff08;IP&#xff1a;10.9.25.33&#xff09; 客户端&#xff1a;centos-2 保证两台机器网络畅通&#xff0c;原yum仓库可用&#xff0c;关闭防火墙和selinux Web服务器端 ①安装httpd并运行&#xff0c;设置开机自启动 安装…

微信小程序 带tab的页面 从数据比较多的tab切到数据比较少的tab时 有可能触发onReachBottom 导致数据重复加载

onReachBottom() {//添加pageNum 1的判断是因为 从tab页比较高的地方切到tab页子集很少的地方可能会直接触发onReachBottom导致数据重复加载if (pageNum 1) return..doing},

多模态模型

转换器成功作为构建语言模型的一种方法&#xff0c;促使 AI 研究人员考虑同样的方法是否对图像数据也有效。 研究结果是开发多模态模型&#xff0c;其中模型使用大量带有描述文字的图像进行训练&#xff0c;没有固定的标签。 图像编码器基于像素值从图像中提取特征&#xff0c;…

力扣数据库题库学习(4.23日)

610. 判断三角形 问题链接 解题思路 题目要求&#xff1a;对每三个线段报告它们是否可以形成一个三角形。以 任意顺序 返回结果表。 对于三个线段能否组成三角形的判定&#xff1a;任意两边之和大于第三边&#xff0c;对于这个表内的记录&#xff0c;要求就是&#xff08;x…

基于Python的智能语音识别系统设计

引言 语言是人类最原始直接的一种交流方式&#xff0c;通俗易懂、便于理解。随着科技的发展&#xff0c;语言交流不再只存在于人与人之间&#xff0c;如何让机器“听懂”人类的语言并做出反应成为人工智能的重要课题&#xff0c;语音智能交互技术应运而生。作为其中重要一环的…

Maven基础篇7

私服-idea访问私服与组件上传 公司团队开发流程 本地上传–>repository–>私服 其他成员从私服拿 1.项目完成后发布到私服 在pom文件最后写上发布的配置管理 ​ //写发布的url也就是你发布到哪一个版本&#xff0c;以及写入id ​ ​ 发布的时候&#xff0c;将项…

安装Selenium

安装Selenium 【0】引言 ​ 由于sleenium4.1.0需要python3.7以上方可支持&#xff0c;请注意自己的python版本。 【1】使用Pycharm安装 使用 快捷键 Ctrl Alt S 【2】使用 pip 安装 Python3.x安装后就默认就会有pip&#xff08;pip.exe默认在python的Scripts路径下&…

VUE2版本的仿微信通讯录侧滑列表

<template><!-- Vue模板部分 --><div><div v-for"(group, index) in groupedArray" :key"index" ref"indexcatch"><h2>{{ letter[index] }}</h2><ul><li v-for"item in group" :key&quo…

Notepad++使用SFTP连接虚拟机编辑文档

一.前言 当我们在虚拟机中使用vim编辑有时候不太方便&#xff0c;可以使用远程工具连接进行编辑。 常用的远程连接编辑方式有 vscode下载remote-ssh插件notepad下载nppftp插件finallshell中可以直接打开文件编辑xftp软件 根据个人习惯去选择使用即可。 这里分享一下notepa…