经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript前端分页实现示例
来源:jb51  时间:2022/7/19 19:04:53  对本文有异议

初窥前端分页

前言

近日接到了一个关于前端分页的需求,某系统仓储模块的分页功能,由于以前分页都是后端处理的,第一次接到这种需求,借此记录一下。

需求分析

应用场景简述:在商品出库以及退回时,需要通过接口获取商品列表,前端通过table方式展示数据,用户多选数据提交后保存在上一级页面的table中。

用户选择数据:

存储用户选择的数据到上一页面

实现目标:

正常的用户翻页,用户已经添加的数据在翻页时进行操作(删除)保证数据流正常,再次点击选择商品时正常屏蔽用户已经选择的商品。

解决思路:

1.新建数组存储源数据,与分页数据隔离。

2.给源数组中的每个元素都打上一个标志,添加sign属性定位源数据中的数据存储位置。

3.在用户操作分页数据时对源数组进行相应操作。

开工,上代码:

封装成一个工具函数供页面调用

  1. // 前端分页
  2. function pageToData(sourceData,page = {pageNo: 1,pageSize: 10}) {
  3. // 给一个page对象的默认值
  4. let arr = [] // 返回的分页数据数组
  5. let num = [] // 临时存储分页数据的序号
  6. const { pageNo,pageSize } = page
  7. for(let i = (pageNo - 1) * pageSize; i < (pageNo * pageSize) ;i++) {
  8. num.push(i)
  9. }
  10. let del = 0; // 指定下一次查询源数组数据开始的位置
  11. sourceData.some((val,index) => { // 遍历源数组
  12. if(num.includes(index)){ // 数组的index是否存在于序号中
  13. let item = index + del // 计算出真正需要取出的数据在数组中的哪个位置
  14. if(item < sourceData.length){ // 如果超出数组长度,自然就不用遍历接下来的数据了
  15. let src = sourceData[item]
  16. if(src.check) { // check是标记源数组中的数据是否为删除状态 也就是check = false就为假删除
  17. src.sign = item // 给数据源加上标记
  18. arr.push(src) // push到要返回的分页数组中
  19. }else{
  20. // 如果这条数据是删除状态则进来这里 可以看findData函数
  21. let { rowData,count } = findData(item + 1,sourceData);
  22. JSON.stringify(rowData) === "{}" ? '' : arr.push(rowData)
  23. }
  24. }else{
  25. return true
  26. }
  27. }
  28. })
  29. return arr;
  30. }
  31. function findData(idx,srcData){ // idx作为标记,从源数据的哪一条开始找以idx为准,src 源数据数组
  32. let rowData = {} // 返回的数组元素
  33. let count = 0 // 标记循环了几次
  34. for(let i = idx ; i < srcData.length ; i++) {
  35. if(srcData[i].check == true) { // 同校验此条数据是否为正常数据
  36. rowData = srcData[i]
  37. rowData.sign = i
  38. count += 1
  39. break
  40. }else{
  41. count += 1
  42. }
  43. }
  44. return {rowData,count}
  45. }
  46. // 单独获取数据的总数量
  47. function getTotal(src){
  48. let total = 0
  49. src.map(val => {
  50. if(val.check) {
  51. total += 1
  52. }
  53. })
  54. return total
  55. }
  56. export {
  57. pageToData,
  58. getTotal
  59. }

转折:

问题到这里已经解决了,删除某条数据只需要将源数据的check属性设置为false,然后重新调用方法获取新的分页数据,提交表单的时候将check为false的数据过滤后再提交,至此也就落幕了,但在我准备提交代码的时候,脑子里突然灵光一闪,object,引用类型,貌似...,于是我又将代码更改了一番。

  1. function pageToData(sourceData,page = {pageNo: 1,pageSize: 10}) {
  2. // 给一个page对象的默认值
  3. let arr = [] // 返回的分页数据数组
  4. const { pageNo,pageSize } = page
  5. for(let i = (pageNo - 1) * pageSize; i < (pageNo * pageSize) ;i++) {
  6. arr.push(souceData[i])
  7. }
  8. return arr;
  9. }

想到引用类型,就想到了数组中每个元素存的都是这个对象的地址,而非某个具体的属性值,只要分页数组对应的元素进行了修改,源数组中相应的对象也会相对应的进行修改,因为两个元素指向的都是同一个内存地址,也就是存放具体对象的内存地址。

而总条数直接使用源数组身上的length方法就可以获取到了,删除对象时先使用数组身上的indexof方法寻找到数据在源数组上存放的下标位置,再使用splice方法将元素删除即可,相对于原来的方法,简洁又方便,性能损耗还没原先的方法高,至此,代码提交,需求落幕。

以上就是JavaScript前端分页实现示例的详细内容,更多关于JavaScript前端分页的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号