JavaScript前端分页实现示例

目录
  • 初窥前端分页
    • 前言
    • 需求分析
    • 实现目标:
    • 解决思路:
    • 开工,上代码:
    • 转折:

初窥前端分页

前言

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

需求分析

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

用户选择数据:

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

实现目标:

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

解决思路:

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

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

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

开工,上代码:

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

//  前端分页
function pageToData(sourceData,page = {pageNo: 1,pageSize: 10}) {
  //    给一个page对象的默认值
  let arr = []  //  返回的分页数据数组
  let num = []  //  临时存储分页数据的序号
  const { pageNo,pageSize } = page
  for(let i = (pageNo - 1) * pageSize; i < (pageNo * pageSize) ;i++) {
    num.push(i)
  }
  let del = 0;  //  指定下一次查询源数组数据开始的位置
  sourceData.some((val,index) => {  //  遍历源数组
    if(num.includes(index)){    //  数组的index是否存在于序号中
      let item = index + del    //  计算出真正需要取出的数据在数组中的哪个位置
      if(item < sourceData.length){     //  如果超出数组长度,自然就不用遍历接下来的数据了
        let src = sourceData[item]
          if(src.check) {   //  check是标记源数组中的数据是否为删除状态 也就是check = false就为假删除
            src.sign = item     //  给数据源加上标记
            arr.push(src)   //  push到要返回的分页数组中
          }else{
            //  如果这条数据是删除状态则进来这里 可以看findData函数
            let { rowData,count } = findData(item + 1,sourceData);
            JSON.stringify(rowData) === "{}" ? '' : arr.push(rowData)
          }
      }else{
        return true
      }
    }
  })
  return arr;
}
  function findData(idx,srcData){   //  idx作为标记,从源数据的哪一条开始找以idx为准,src 源数据数组
    let rowData = {}    //  返回的数组元素
    let count = 0   //  标记循环了几次
    for(let i = idx ; i < srcData.length ; i++) {
      if(srcData[i].check == true) {    //  同校验此条数据是否为正常数据
        rowData = srcData[i]
        rowData.sign = i
        count += 1
        break
      }else{
        count += 1
      }
    }
    return {rowData,count}
  }
//  单独获取数据的总数量
  function getTotal(src){
    let total = 0
    src.map(val => {
      if(val.check) {
        total += 1
      }
    })
    return total
  }
export {
  pageToData,
  getTotal
}

转折:

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

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

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

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

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

(0)

相关推荐

  • JavaScript前端实现小说分页功能示例

    目录 先让我找找我的思路在哪里 思路已至,码来! 结束 先让我找找我的思路在哪里 在小说读书APP中,都会有分页的功能,那么前端如何实现这个功能呢? 因为没有什么思路,那就只能在前辈的项目中寻找思路了. 这不,直接打开起点的页面,按下那个传说中的F12键,开始我传奇生涯!...不好意思,串台了 好了,然后在找一本有缘书,跟我一同前往那神秘的未知世界. 就决定是你了,开始免费试读. 然后我们就可以发现起点是如何实现这个功能的了,原来是使用columns这个属性来让文章自动分页的昂. 我们现在就去搜

  • js实现简单的前端分页效果

    有些项目业务比较简单,但用到前端分页的地方又比较多,插件的体积比较难控制用起来也麻烦,所以自己写一个简易的. 实现思路 通过 jQuery.slice()选择子集的区间元素, 然后控制显示隐藏来实现: 假设每页显示数量为x,当前页码为y,元素索引从0开始,那么显示的区间即为 x(y-1) 到 xy. 效果演示 demo代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

  • javascript实现前端分页效果

    本文实例为大家分享了javascript实现前端分页效果的具体代码,供大家参考,具体内容如下 需求:实现分页请求表格数据,ajax暂时没写,只写了分页的功能. 效果图: 当页数是第一页的时候,首页和向前那个按钮处于禁止点击的状态 各个按钮都正常的状态 当页数是第一页的时候,首页和向前那个按钮处于禁止点击的状态 各部分的代码如下: html部分: <!-- 分页 --> <div class="pageBox"> <div class="pageT

  • javascript实现前端分页功能

    前言:今天给大家带来的是前端数据的分页功能,供大家参考,具体内容如下 先上一波效果图展示: 直接上代码:这里使用的是JavaScript来实现 关于代码详解都以注释的方式写在JavaScript里的 HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分页</title> <link rel="stylesheet&qu

  • JS实现前端分页效果

    本文实例为大家分享了JS实现前端分页效果的具体代码,供大家参考,具体内容如下 一.HTML部分 <!doctype html> <html> <head> <meta charset='utf-8'> <script src="js/jquery.js"></script> <style type="text/css"> a{text-decoration: none;} table

  • JS实现前端动态分页码代码实例

    思路分析:有3种情况 第一种情况,当前页面curPage < 4 第二种情况,当前页面curPage == 4 第三种情况,当前页面curPage>4 此外,还要考虑,当前页码 curPage < pageTotal(总页码)-2,才显示 ... 首先,先是前端的布局样式 <body> /*首先,在body中添加div id="pagination" */ <div id="pagination"> <!-- 后面会在

  • JavaScript前端分页实现示例

    目录 初窥前端分页 前言 需求分析 实现目标: 解决思路: 开工,上代码: 转折: 初窥前端分页 前言 近日接到了一个关于前端分页的需求,某系统仓储模块的分页功能,由于以前分页都是后端处理的,第一次接到这种需求,借此记录一下. 需求分析 应用场景简述:在商品出库以及退回时,需要通过接口获取商品列表,前端通过table方式展示数据,用户多选数据提交后保存在上一级页面的table中. 用户选择数据: 存储用户选择的数据到上一页面 实现目标: 正常的用户翻页,用户已经添加的数据在翻页时进行操作(删除)

  • 封装好的javascript前端分页插件pagination

    摘要:     最近在开发项目中又用到了前端分页,以前也做过,为了方便以后使用所以将他封装成第三方插件,不依赖任何库.网上已经有很多插件,问什么还要自己造轮子? 自己写的扩展性高 不依赖任何库 作为一次技术沉淀 先看下效果图 安装方法 首先在页面中要载入css及js <link rel="stylesheet" href="dist/pagination.css"> <script src="dist/pagination.js"

  • 前端 javascript 实现文件下载的示例

    在 html5 中,a 标签新增了 download 属性,包含该属性的链接被点击时,浏览器会以下载文件方式下载 href 属性上的链接.示例: <a href="https://www.baidu.com" rel="external nofollow" download="baidu.html">下载</a> 1. 前端 js 下载实现与示例 通过 javascript 动态创建一个包含 download 属性的 a

  • java前端javascript生成动态表格示例演示

    目录 前言 案例分析 代码 动图演示 结语 前言 动态生成表格是前端开发中非常重要的内容,常常是后端返回数据(大多是json类型),我们前端通过js循环来动态添加,所以这部分内容是十分重要的,今天我就来写写这部分内容,其实也很简单的,仔细看哦!!! 案例分析 因为里面的学生数据都是动态的,我们需要 js 动态生成.这里我们模拟数据,自己定义好数据.数据我们采取对象形式存储.所有的数据都是放到 tbody 里面的行里面.因为行很多,我们需要循环创建多个行(对应多少人). 代码 <!DOCTYPE

  • JavaScript实现前端分页控件

    现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据.前端分页多是用ajax请求数据(其他方式也有比如手动构造表单模拟提交事件等).通过js将查询参数构造好发向后台,后台处理后以特定的格式返回,多为json,比较流行处理起来也很方便.当后台数据到达后,浏览器重新渲染界面当然也包括js分页控件,如果觉得每次绘制分页控件对前端性能有影响也可以不绘制,但实现起来相对麻烦. 本人写的分页控件参考了其他网友的代码,链接忘了,控件接受四个参数或一个对象

  • javascript前端和后台进行数据交互方法示例

    在开发中遇到了在没有jQuery的情况下需要与后台进行部分数据的交互,查找了部分资料使用JavaScript实现了操作,记录一下. //获取XMLHttpRequest对象用于与后台交互数据 function getXHR(){ var xmlHttp; try { xmlHttp=new XMLHttpRequest();//新版本浏览器 }catch(e) { try{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e)

  • ThinkPHP整合datatables实现服务端分页的示例代码

    最近做东西有一个需求,因为数据量很大,在这里我决定使用datatables的服务端分页,同时还需要传递查询条件到服务端.在网上搜索的大部分文章都感觉有些误差,于是自己封装了一下,主要配置/工具为: 服务端:php(使用thinkphp) 页面样式来自于H-ui框架(datatables版本为1.10.0) 主要修改(databases)配置项为: 1) bProcessing:true 使用ajax源 2) serverSide:true 使用服务端分页 3) createdRow:functi

  • Python+Flask实现自定义分页的示例代码

    目录 前言 后端 后端思路 后端代码 前端 前端思路 前端代码 前言 分页操作在web开发中几乎是必不可少的,而我们的flask不像django自带封装好的分页操作,要分页则需要依赖flask-sqlalchemy中的分页查询,但是分页这么重要且简单的操作,自己实现必须要会这个思维,我也在网上看了一些,但大体上不合我意,因此这篇我带大家手写一个分页操作! 后端 后端思路 写这个分页操作前我们首先要思考我们需要什么?我们需要将我们需要的东西封装到一个字典里,然后传给前端!那么这里我先说分页算法,很

随机推荐