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下载 ↩︎

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • docker镜像操作_docker 本地镜像

    docker镜像操作_docker 本地镜像前言Docker的三大核心概念:镜像、容器、仓库。初学者对镜像和容器往往分不清楚,学过面向对象的应该知道类和实例,这跟面向对象里面的概念很相似我们可以把镜像看作类,把容器看作类实例化后的对象。|

  • vs2010专业板产品密钥

    vs2010专业板产品密钥网上查找很多,大家都在使用这个,试过之后,可以。YCFHQ-9DWCY-DKV88-T2TMH-G7BHP

  • 使用ICSharpCode.SharpZipLib.dll实现在线解压缩

    使用ICSharpCode.SharpZipLib.dll实现在线解压缩ICSharpCode.SharpZipLib.dll是一个基于GNU的免费库文件,他的功能很强大。下载地址:http://www.icsharpcode.net/OpenSource/SharpZipLib/Download.aspx下面是对#ZipLib进行.net下的解压缩的方法的介绍。1.BZip2加入ICSharpCode.SharpZipLib.dll的引用,在#De

  • STM32独立看门狗

    STM32独立看门狗参考正点原子视频看门狗在由单片机构成的微型计算机系统中,由于单片机的工作常常会受到来自外界电磁场的干扰,造成程序的跑飞,而陷入死循环,程序的正常运行被打断,由单片机控制的系统无法继续工作,会造成整个系统的陷入停滞状态,发生不可预料的后果,所以出于对单片机运行状态进行实时监测的考虑,便产生了一种专门用于监测单片机程序运行状态的模块或者芯片,俗称:看门狗看门狗的意义在启动正常运行的时候,系统不能复位在系统跑飞(程序异常执行)的情况,系统复位,程序重新执行独立看门狗(IWDG)由专用的低速时钟(L

  • 一、Python简介

    一、Python简介Python简介python的创始人为吉多·范罗苏姆(GuidovanRossum)。1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释

  • ASP.NET GridView 内嵌 DropDownList 绑定数据「建议收藏」

    ASP.NET GridView 内嵌 DropDownList 绑定数据「建议收藏」aspx页面代码:’DataValueField=”Val”DataTextField=”Text”>

发表回复

您的电子邮箱地址不会被公开。

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