js 根据指定个数切割数组
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 根据指定个数切割数组的更多相关文章
- JS对象 指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. 语法: arrayObject.join(分隔符) 参数说明: 注意:返回 ...
- 随笔 JS 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里
JS /* * 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里 * @id 要插入到DOM元素的ID * * 输入值为图片URL 字符串 * */ function addImages(i ...
- js 字符串分割成字符串数组 遍历数组插入指定DOM里 原生JS效果
使用的TP3.2 JS字符串分割成字符串数组 var images='{$content.pictureurl} ' ;结构是这样 attachment/picture/uploadify/20141 ...
- Lua在给定范围内,生成指定个数不重复随机数组
本篇主要是参考 lua连续随机数 这篇文章完成.大家可以去原贴查看学习. 生成随机数组,暂时发现两种方法 1.把生成的数放到一个表里面,每次随机时判断这个表里是否有,若有再随机一次(问了朋友,很多人都 ...
- js指定分隔符连接数组元素join()
指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. 语法: arrayObject.join(分隔符) 参数说明: 注意:返回 ...
- js常见的字符串及数组处理
最近工作设计前台比较多,由于好久没动前台,或者使用前台框架习惯了,js有点生,将常见的字符串处理忘了,在这里整理一下常见的,以便于查阅: 1.substr():字符串分割,第一个是开始的下标,第二个是 ...
- php 算法之切割数组,不用array_chunk(),算法之二,取数组的差值,不用array_diff()
用php写算法切割数组,不用array_chunk();算法例如以下所看到的. <?php //$array 数组 //$size 每一个数组的个数 //每一个数组元素是否默认键值 functi ...
- js学习笔记之:数组(一)
今天来学习一下js中的一维数组.二维数组,以及数组的赋值.遍历.删除.排序等操作: 1 数组的声明 js提供了一个数组对象Array,默认是一维数组,其申明的方法如下: var aCity = ...
- 生成32位UUID及生成指定个数的UUID
参考地址:https://blog.csdn.net/xinghuo0007/article/details/72868799 UUID是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯 ...
随机推荐
- NOI前总结:点分治
点分治: 点分治的题目基本一样,都是路径计数. 其复杂度的保证是依靠 $O(n)$ 找重心的,每一次至少将问题规模减小为原先的$1/2$. 找重心我喜欢$BFS$防止爆栈. int Root(int ...
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 09. Model验证
数据注解 这样前后就会有div把这个inoput给包起来 添加一个Label使用TagHelper也有只能提示 出现的效果是这样的,实际上是把model的属性名打印出来.了. 把其他几个label也添 ...
- Spring源码分析——调试环境搭建(可能是最省事的构建方法)
1. 依赖工具 idea git jdk 1.8 + Gradle 2. 获取源码 从github https://github.com/spring-projects/spring-framewor ...
- sublime text3安装配置c++环境(windows+ubuntu)
1.下载sublime text3 官网地址:http://www.sublimetext.com/3 ubuntu直接在Ubuntu Software中搜索sublime安装 2.配置环境变量(wi ...
- mongodb 安装问题
重新安装一台机器时出现头疼的问题,老是说什么 dbpath 不存在 结果最后发现是没有写 mongodb.log 这个log文件名 1. 创建 datas 文件夹 e:\mongodb\datas ...
- rabbitMQ的使用
介绍 一款消息队列数据库,类似redis发布订阅,但是rq 做了功能完善和数据持久化.在项目中,将一些无需即时返回且耗时的操作提取出来,进行了异步处理,而这种异步处理的方式大大的节省了服务器的请求响应 ...
- UWP 动画
一:StoryBoard 一般翻译成演示图版或者故事板,就像电影中的情节串联板,它是一个动画时间线的容器. 二:动画的分类 简单动画:以Animation结尾,例如DoubleAnimat ...
- Codeforces Round #405 (rated, Div. 2, based on VK Cup 2017 Round 1) E
Description Bear Limak prepares problems for a programming competition. Of course, it would be unpro ...
- Problem E: 穷游中国在统题 优先队列 + 模拟
http://www.gdutcode.sinaapp.com/problem.php?cid=1049&pid=4 Problem E: 穷游中国在统题 Description Travel ...
- java.util.Properties类的介绍-配置文件的读写【-Z-】
简介:java.util.Properties是对properties这类配置文件的映射.支持key-value类型和xml类型两种. #打头的是注释行,Properties会忽略注释.允许只有key ...