前端分页请求数据,前端删除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
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端请求后台所有数据并触发一次出30数据,可以通过以下几种方式实现: 1. 后台接口返回分页数据:在后台接口中添加分页参数,前端请求时设置分页参数,后台返回对应页码的数据。 2. 前端通过数组截取实现分页:在前端请求到所有数据后,使用数组的`slice`方法对数据进行截取,取出对应页码的数据并展示。 ```javascript // 假设 data 是后台返回的所有数据 const pageSize = 30; // 每页展示30数据 const pageIndex = 1; // 请求第一页数据 const start = (pageIndex - 1) * pageSize; // 计算需要展示数据的起始位置 const end = pageIndex * pageSize; // 计算需要展示数据的结束位置 const pageData = data.slice(start, end); // 截取需要展示的数据 ``` 3. 前端通过Vue的计算属性实现分页:在Vue组件中定义一个计算属性,根据当前页码和每页展示数量计算需要展示的数据。 ```javascript data() { return { allData: [], // 所有数据 pageIndex: 1, // 当前页码 pageSize: 30 // 每页展示数量 } }, computed: { pageData() { const start = (this.pageIndex - 1) * this.pageSize; // 计算需要展示数据的起始位置 const end = this.pageIndex * this.pageSize; // 计算需要展示数据的结束位置 return this.allData.slice(start, end); // 截取需要展示的数据 } } ``` 以上三种方式都可以实现前端请求后台所有数据分页展示。其中,第一种方式需要后台接口的支持,第二种和第三种方式都是在前端进行数据处理,比较灵活。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值