`Page4array`分页处理工具类 ¹

^{/*** 分页数组* @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;elsetry {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，或有其它优化建议，欢迎在此文章“评论区”留言讨论，并留下您的邮箱，以便改正后及时通知您。}

^{page4array.js下载 ↩︎}

JavaScript Array数组分页相关推荐

JavaScript Array数组slice方法的使用
语法: arr.slice([begin[, end]]) begin 可选从该索引开始提取原数组元素,如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取. 此参数缺省为0,如果 begin ...
for 循环和 Array 数组对象
博客地址:https://ainyi.com/12 for 循环和 Array 数组对象方法 for for-in for-of forEach效率比较 - 四种循环,遍历长度为 1000000 的 ...
JavaScript 常用内置对象(字符串属性、Math对象、Array数组对象)
1.字符串属性 <script> var test_var = "I Iove you"; console.log(test_var.charAt(3)) //char ...
JavaScript的json和Array及Array数组的使用方法
1.关于json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集.也可以称为数据集和数组类似,能够存数据! //Ar ...
JavaScript Array function 常见操作json 数组
JavaScript中创建数组有两种方式 (一)使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(20); / ...
JavaScript中的Date日期、String字符串、Array数组、Math提供对数据的数学计算
一.Date 日期对象日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 定义一个时间对象 : var Udate=new Date(); 注意:使用关键字new,Date() ...
javascript数组降维_js Array数组实用操作大全(≈28条)不定期更新
来源:(更新:2019-12-26)https://github.com/renzhezhilu/Blog/blob/master/javaScript/jsAdvanced/Array%E6%93% ...
JavaScript引用类型之Array数组之强大的splice()方法
splice()方法可以说是Array数组最强大的方法,他的用法很多,主要用法是向数组的中部插入项! 下面是它的用法: arrayObject.splice(index,howmany,element ...
小汤学编程之JavaScript学习day03——对象、Array数组、String字符、Date日期、JSON
一.JS中的对象二.Array数组 1.特点 2.数组的定义 3.常用方法 4.数组的遍历三.String字符 1.定义 2.常用方法四.Date日期 1.定义 ...

JavaScript Array数组分页

JavaScript：将Array数组分页处理

`Page4array`分页处理工具类 ¹

^测试示例

JavaScript Array数组分页相关推荐

最新文章

热门文章

JavaScript Array数组分页

JavaScript：将Array数组分页处理

Page4array分页处理工具类 1

测试示例

JavaScript Array数组分页相关推荐

最新文章

热门文章

`Page4array`分页处理工具类 ¹

^测试示例