Part.1 问题

写项目时,遇到需要前端做 假分页 的问题:后端会将数据全部返回,前端自己做分页

Part.2 思路

拿到后端全部返回的数据后,按照 产品需求  进行分页,如每页显示 10 条数据为例,则需要将全部数据 按照每 10 条一个小数组进行分割,然后合并为一个大数组,然后根据索引取值

Part.3 例如

我们假设这是后端返回的全部数据

arr: [
{name: '小明', age: 20},
{name: '小红', age: 21},
{name: '小军', age: 22},
{name: '小王', age: 23},
{name: '小朱', age: 24},
{name: '小刘', age: 25},
{name: '小张', age: 26},
{name: '小庞', age: 27},
{name: '小米', age: 28},
{name: '小华', age: 29},
{name: '小郑', age: 30},
{name: '小蓝', age: 31},
{name: '小绿', age: 32},
{name: '小青', age: 33},
{name: '小白', age: 34},
{name: '小黑', age: 35},
{name: '小橙', age: 36},
{name: '小紫', age: 37},
{name: '小山', age: 38},
{name: '小一', age: 39},
{name: '小鹏', age: 40},
{name: '小丛', age: 41},
{name: '小鱼', age: 42},
{name: '小李', age: 43},
{name: '小英', age: 44},
{name: '小杰', age: 45},
{name: '小金', age: 46},
{name: '小窗', age: 47},
{name: '小叶', age: 48},
{name: '小文', age: 49},
{name: '小龙', age: 50},
{name: '小纯', age: 51},
{name: '小伟', age: 52},
{name: '小佳', age: 53},
{name: '小吴', age: 54},
{name: '小枚', age: 55},
{name: '小原', age: 56},
{name: '小书', age: 57},
{name: '小江', age: 58},
{name: '小砚', age: 59},
{name: '小然', age: 60}
],

首先创建一个空数组,用于接收分割完成的小数组

 newArr: []

然后根据每页 条进行分割

 dataHandling: function() {
let arrLength = this.arr.length; // 数组长度
let num = 10; // 每页显示 10 条
let index = 0;
for (let i = 0; i < arrLength; i++) {
if (i % num === 0 && i !== 0) { // 可以被 10 整除
this.newArr.push(this.arr.slice(index, i));
index = i;
};
if ((i + 1) === arrLength) {
this.newArr.push(this.arr.slice(index, (i + 1)));
}
};
}

结果如下:

将数据分割成了 个小数组,每个小数组为 10条 数据,然后根据分页操作取 大数组(newArr)的索引 就可以完成取值,实现假分页操作了!~~~

js 根据指定个数切割数组的更多相关文章

  1. JS对象 指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

    指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. 语法: arrayObject.join(分隔符) 参数说明: 注意:返回 ...

  2. 随笔 JS 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里

    JS /* * 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里 * @id 要插入到DOM元素的ID * * 输入值为图片URL 字符串 * */ function addImages(i ...

  3. js 字符串分割成字符串数组 遍历数组插入指定DOM里 原生JS效果

    使用的TP3.2 JS字符串分割成字符串数组 var images='{$content.pictureurl} ' ;结构是这样 attachment/picture/uploadify/20141 ...

  4. Lua在给定范围内,生成指定个数不重复随机数组

    本篇主要是参考 lua连续随机数 这篇文章完成.大家可以去原贴查看学习. 生成随机数组,暂时发现两种方法 1.把生成的数放到一个表里面,每次随机时判断这个表里是否有,若有再随机一次(问了朋友,很多人都 ...

  5. js指定分隔符连接数组元素join()

    指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. 语法: arrayObject.join(分隔符) 参数说明: 注意:返回 ...

  6. js常见的字符串及数组处理

    最近工作设计前台比较多,由于好久没动前台,或者使用前台框架习惯了,js有点生,将常见的字符串处理忘了,在这里整理一下常见的,以便于查阅: 1.substr():字符串分割,第一个是开始的下标,第二个是 ...

  7. php 算法之切割数组,不用array_chunk(),算法之二,取数组的差值,不用array_diff()

    用php写算法切割数组,不用array_chunk();算法例如以下所看到的. <?php //$array 数组 //$size 每一个数组的个数 //每一个数组元素是否默认键值 functi ...

  8. js学习笔记之:数组(一)

    今天来学习一下js中的一维数组.二维数组,以及数组的赋值.遍历.删除.排序等操作:    1 数组的声明 js提供了一个数组对象Array,默认是一维数组,其申明的方法如下: var aCity = ...

  9. 生成32位UUID及生成指定个数的UUID

    参考地址:https://blog.csdn.net/xinghuo0007/article/details/72868799 UUID是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯 ...

随机推荐

  1. DC 兼容的DC

    DC是 "Device Content" , MS VC++ 的 MFC图形设备接口 的 设备描述表.它是MFC的主要对象之一.通过CDC类进行各种绘图操作,例如选笔,选色,选涂色 ...

  2. k8s-存储卷1-十二

    因为pod是有生命周期的,pod一重启,里面的数据就没有了.所以我们需要数据持久化存储. 在k8s中,存储卷不属于容器,而是属于pod.也就是说同一个pod中的容器可以共享一个存储卷. 存储卷可以是宿 ...

  3. Gym 100299C && UVaLive 6582 Magical GCD (暴力+数论)

    题意:给出一个长度在 100 000 以内的正整数序列,大小不超过 10^ 12.求一个连续子序列,使得在所有的连续子序列中, 它们的GCD值乘以它们的长度最大. 析:暴力枚举右端点,然后在枚举左端点 ...

  4. [WPF自定义控件库] 自定义控件的代码如何与ControlTemplate交互

    1. 前言 WPF有一个灵活的UI框架,用户可以轻松地使用代码控制控件的外观.例设我需要一个控件在鼠标进入的时候背景变成蓝色,我可以用下面这段代码实现: protected override void ...

  5. Android EditText实现小数点后几位的终级方案

    有时候,我们用EditText的时候,会要求输入小数点后几位,遇到过几次这样的需求,这次把它给记下来,方便以后使用 /** * 小数位数 */ public class PointLengthFilt ...

  6. Unity Transform常识(转)

    Variables   position: Vector3  物体在世界坐标中的位置. transform.position=Vector3(10,10,10)//把物体放到(x=10,y=10,z= ...

  7. C++ 的输出格式

    0 在C语言中很简单对输出的要求,然而在C++中有一丝的麻烦. 在下面的代码中所需要的是 #include<iostream> 基本输入/输出库 #include<iomanip&g ...

  8. Java | 基础归纳 | java时间格式处理总结

    https://www.cnblogs.com/edwardlauxh/archive/2010/03/21/1918615.html https://blog.csdn.net/xsj_blog/a ...

  9. 简单几何(求交点) UVA 11178 Morley's Theorem

    题目传送门 题意:莫雷定理,求三个点的坐标 分析:训练指南P259,用到了求角度,向量旋转,求射线交点 /*********************************************** ...

  10. [在读]javascript框架设计

    司徒正美的书,内容我觉得不错,国内的书很少会讲这些.当然也有很多人吐槽它只贴代码没有解释,文笔不够优美啥啥的,我想说,不要在意这些细节,反正是值得买的一本.