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)
上一篇 2022年7月13日 下午5:46
下一篇 2022年7月13日 下午5:46


相关推荐

  • ICMP数据包分析_Wireshark数据包分析实战

    ICMP数据包分析_Wireshark数据包分析实战一.实验目的1.学习和掌握ICMP协议的基本作用和报文格式2.理解ICMP协议与IP协议的封装关系3.学习和掌握ICMP协议的应用和报文格式4.理解tracertoute工作过程二.实验拓扑三.实验工具GNS3和Wireshark抓包分析软件四.ICMP协议的封装格式(1)Type类型值,标识ICMP分组类型(2)Code代码值,标识ICMP分组类型的某一种具体分组(3)Checksum校验和,用于检验数据包是否完整或是否被修改(4)Identifier标识符,标识本进程

    2025年8月26日
    6
  • pgrouting 路径规划_路径分析是什么意思

    pgrouting 路径规划_路径分析是什么意思一.技术背景,相关技术介绍   PgRouting是基于开源空间数据库PostGIS用于网络分析的扩展模块,最初它被称作pgDijkstra,因为它只是利用Dijkstra算法实现最短路径搜索,之后慢慢添加了其他的路径分析算法,如A算法,双向A算法,Dijkstra算法,双向Dijkstra算法,tsp货郎担算法等,然后被更名为pgRouting[1]。该扩展库依托PostGIS自身的g…

    2022年8月24日
    6
  • sp_executesql 与 参数

    sp_executesql 与 参数总结了一下 sp_executesql 与 参数 的关系 sp_executesql  并不能通过参数列表指定任意部分,在普通sql语句中是变量的可以指定,是常量的不能指定。在sp_executesql 执行的字符串中, 下面称为spStr,有些是在设置sql字符串前就必须指定的,有些是以变量的形式指定的。跟sql语句相一致,这里语句称为 sqlStr,凡是在sqlStr语句中必须要声明为常

    2022年5月21日
    36
  • Pycharm terminal 调用Anaconda prompt

    Pycharm terminal 调用Anaconda promptnbsp nbsp nbsp nbsp 我在电脑上直接安装了 Anaconda 的包 于是在使用 pycharm 的时候 interpreter 直接选择的使 conda 里自带的 python 最近看见别人代码使用 TensorFlow 实现命令行调参 于是进过一番查资料和试验 找到了解决办法 nbsp nbsp nbsp 1 找到 anacondaprom 右键属性 nbsp 2 在 nbsp 目标 nbsp 里选择 cmd exe 及以后的所有路径 复制 nbsp 3 打

    2026年3月18日
    3
  • mysql数据库double类型_timestamp是什么数据类型

    mysql数据库double类型_timestamp是什么数据类型1、整型MySQL数据类型含义(有符号)tinyint(m)1个字节范围(-128~127)smallint(m)2个字节范围(-32768~32767)mediumint(m)3个字节范围(-8388608~8388607)int(m)4个字节范围(-2147483648~2147483647)bigint(m)8个字节范围(+-9.22*10的18次方)取值范围如果加了un…

    2026年2月3日
    5
  • c0000005 access_violation_0X0000005

    c0000005 access_violation_0X00000050xC0000005:AccessViolation-vc++6.0aps001,002,003创建的C:\SMW200DATA\DATA,内容是不一样的,不通用的。读取相关文件就会报错咯。如果想要运行,则目录内容得删除。然要运行时,自动创建。每台设备已经有了数据时,需要先备份C:\SMW200DATA\DATA里面的内容。否则数据丢失。参考:https://blog.csd…

    2022年10月3日
    4

发表回复

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

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