JavaScript Array数组分页

JavaScript Array数组分页javaScript:将Array数组分页处理,支持分页数据容错;兼容版本:ES6。

大家好,又见面了,我是你们的朋友全栈君。

Page4array分页处理工具类 1

/** * 分页数组 * @param array {@link Array}:源数组; * @param pn {@link Number}:当前页; * @param ps {@link Number}:页显示数; * @param fn {@link Function}:执行完成后回调; * @return {@link Page4array} * @constructor * @version V1.0.1 * @author Haining.Liu */
function Page4array(array, pn, ps, fn) { 
   
	for (let i = 1, len = arguments.length; i < len; i++) { 
   
		let pm = arguments[i];
		if (pm && typeof pm == 'function') { 
       //切换回调参数位置
			arguments[i] = undefined;
			fn = pm;
			break;
		}
	}
	this.fn = fn;
	this.source = array;
	this.total = 0; //总数
	this.size = 1;  //总页数
	if (array && array.length) { 
   
		this.total = array.length;
		ps = (!ps || ps < 0) ? 10 : Number(ps);
		if (ps > 0)
			this.size = Math.ceil(this.total / ps);
	}
	this.adjust(pn, ps);
	Object.prototype.toString.call(array) == '[object Array]' ? this.run() : (this.result = []);
	return this;
}

/** * 静态初始化函数 * @param array {@link Array}:源数组; * @param pn {@link Number}:当前页; * @param ps {@link Number}:页显示数; * @param fn {@link Function}:执行完成后回调; * @return {@link Page4array} * @constructor * @version V1.0.1 * @author Haining.Liu */
Page4array.Init = function () { 
   
	return new Page4array(...arguments);
};

(function () { 
   
	/** * 上一页 * @param fn {@link Function}:执行完成后回调; * @return {@link Page4array} */
	Page4array.prototype.prev = function (fn) { 
   
		this.pageNum--;
		return this.run(fn);
	};
	/** * 下一页 * @param fn {@link Function}:执行完成后回调; * @return {@link Page4array} */
	Page4array.prototype.next = function (fn) { 
   
		this.pageNum++;
		return this.run(fn);
	};
	/** * 去指定页 * @param pn {@link Number}:指定页; * @param fn {@link Function}:执行完成后回调; * @return {@link Page4array} */
	Page4array.prototype.to = function (pn, fn) { 
   
		this.adjust(pn);
		return this.run(fn);
	};
	/** * 执行 * @param fn {@link Function}:执行完成后回调; * @return {@link Page4array} */
	Page4array.prototype.run = function (fn) { 
   
		this.adjust();
		// this.start = (this.pageNum - 1) * this.pageSize;
/* if (this.start > this.total) { this.result = []; return this; }*/
		this.result = this.source.slice(this.start, this.end + 1);
		this.fn = fn || this.fn;
		if (!this.fn || typeof this.fn != 'function')
			this.data = undefined;
		else
			try { 
   
				this.data = this.fn(this.result, this);
			} catch (e) { 
   
				console.error(this.data = e);
			}
		return this;
	};
	/** * 分页值校准 * @param pn {@link Number}:当前页; * @param ps {@link Number}:页显示数; * @return {@link Page4array} */
	Page4array.prototype.adjust = function (pn, ps) { 
   
		this.pageNum = pn || this.pageNum;
		this.pageSize = ps || this.pageSize;
		this.pageSize = (!this.pageSize || this.pageSize < 0) ? 10 : Number(this.pageSize);
		this.pageNum = (!this.pageNum || this.pageNum <= 0) ? 1 :
				(this.pageNum > this.size) ? this.size : Number(this.pageNum);

		this.start = (this.pageNum - 1) * this.pageSize;
		this.end = (this.start + this.pageSize >= this.total) || this.pageSize == 0 ?
				this.total : this.start + this.pageSize;
		this.end--;
		return this;
	};
	/** * 重写toString * @return {@link String} */
	Page4array.prototype.toString = function () { 
   
		return JSON.stringify(this);
	};
})();

测试示例

let ids = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
// ids = { //设置为错误Object类型,模仿Array
// length: 12
// };
// ids = null;

// let page = Page4array.Init(ids); //调用静态初始化函数,同 new Page4array(ids) 的写法
// console.log(page);
// console.log(page.prev());
// console.log(page.next(fn));
// console.log(page.next(null));
// page.fn = null; //将当前实例的回调置空
// console.log(page.prev());
for (let i = 0; i < 6; i++) { 
   
	console.log('\t========', i, '\r\n');
	console.log(Page4array.Init(ids, fn, 5));
	console.log(Page4array.Init(ids, i, 5, fn));
	console.log(Page4array.Init(ids, i, fn));
	console.log(Page4array.Init(ids, i, 15, fn));
}

/** * 模仿分页回调处理 * @param data {@link Array}:当前分页数组; * @return {@link Array} * @version V1.0.1 */
function fn(data) { 
   
	let rs = new Array(data.length);
	for (let i = 0; i < data.length; i++)
		rs[i] = { 
   id: data[i]};
	return rs;
}

使用过程中,如出现bug,或有其它优化建议,欢迎在此文章“评论区”留言讨论,并留下您的邮箱,以便改正后及时通知您。


  1. page4array.js下载 ↩︎

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/158386.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • mac是基于什么内核的操作系统_mac编译android源码

    mac是基于什么内核的操作系统_mac编译android源码MAC内核编程指南-同步原语

    2022年10月8日
    2
  • goland 2021.11.3 激活码【最新永久激活】「建议收藏」

    (goland 2021.11.3 激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月29日
    97
  • 苹果关闭自动更新_iOS屏蔽更新不用描述文件,苹果官方:安排![通俗易懂]

    他来了!他来了!我们可以看到iOS13.6系统测试版在设置里添加了一个关闭自动下载和自动安装的按钮。左:iOS13.5.1右:iOS13.6苹果手机的iOS系统小版本更新不断,老是自动下载更新包,让人感到被强迫升级,即使苹果公司的出发点是好的,“这是为你们好,最新系统更安全”。然而大多数用户都认为没必要经常升级系统,不升级就不会遇到系统Bug,经常升级难免会遇到。有一种…

    2022年4月15日
    214
  • 安卓中preferenceFragment的使用

    安卓中preferenceFragment的使用文章目录 PreferenceFr 是什么 Preferences 页面 string 页面 gt 我们来写 UI 界面接着我们来写一个 MainActivity 页面最后我们来写 FragmentPerf 页面 PreferenceFr 是什么 publicabstra 以一个列表来展示首选项对象

    2025年9月16日
    0
  • 《王道》数据结构笔记整理2022级_数据结构笔记整理

    《王道》数据结构笔记整理2022级_数据结构笔记整理数据结构第一章绪论1.1数据结构的基本概念1.2数据结构的三要素1.3算法的基本概念1.4算法的时间复杂度1.5算法的空间复杂度第一章绪论1.1数据结构的基本概念1.数据:数据是信息的载体,是描述客观事物属性的数、字符以及所有能输入到计算机中并被程序识别和处理的符号的集合。2.数据元素:数据元素是数据的基本单位,通常作为一个整体进行考虑和处理。一个数据元素可由若干数据项组成,数据项是构成数据元素的不可分割的最小单位。例如,学生记录就是一个数据元素,它由学号、姓名、性别等数据项组成。3.数据对象:数

    2022年8月23日
    15
  • Web开发 Cs和Bs架构

    Web开发 Cs和Bs架构CS架构:是指客户端与服务器举个例子:qq.exe文件在电脑上安装就可以看做是一个客户端,而数据就是从服务器发送过来的,优点在于,安全性能相对而言较高,缺点在于,对于不同的操作系统需要开发出不同版本的软件BS架构:是指游览器与服务器比如说qq.com可以在浏览器中直接访问优点在于,具有可移植性缺点在于,安全性能相对较低,以及与电脑自身的网速有关…

    2022年9月8日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号