视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript趣题:前端分页
2020-11-27 20:26:05 责编:小采
文档


在前端进行分页是一件很炫酷的事情,它可以缓解服务器端的压力,减少了请求次数以及服务器计算量。

不过,你得需要把它做成一个组件的形式,这样才方便在各处调用,否则每一个页面都写一套,岂不是费力不讨好?

最好是实现一个这样的帮助类,如下所示:

//第一个参数是要分页的JSON对象 
//第二个参数是每一页的最大项数 
var helper = new PaginationHelper(['a','b','c','d','e','f'], 4); 
//总共多少页 => Math.ceil(6 / 4) 
helper.pageCount(); // 2 
//总共多少项 => array.length 
helper.itemCount(); // 6 
//求当前页的项数,这个页的索引是从0开始的 
helper.pageItemCount(0); // 4 
//6 - 4 = 2 
helper.pageItemCount(1); // 2 
//总共才2页,所以当前页无效,返回-1 
helper.pageItemCount(2); // -1 
 
//当前索引是属于第几页? 
helper.pageIndex(5); // 1 
helper.pageIndex(2); // 0 
//总共都才6条记录,所以20无效 
helper.pageIndex(20); // -1 
//索引小于0,无效返回-1 
helper.pageIndex(-10); // -1

无论是前端分页还是后端分页,思路是一样的,都比较简单,不过得注意对非法值的处理。

function PaginationHelper(collection, itemsPerPage){ 
 this.collection = collection; 
 this.itemsPerPage = itemsPerPage; 
} 
 
PaginationHelper.prototype.itemCount = function() { 
 return this.collection.length; 
} 
 
PaginationHelper.prototype.pageCount = function() { 
 return Math.ceil(this.itemCount() / this.itemsPerPage); 
} 
 
PaginationHelper.prototype.pageItemCount = function(pageIndex) { 
 if(pageIndex < this.pageCount() - 1){ 
 return this.itemsPerPage; 
 } 
 else if(pageIndex == this.pageCount() - 1){ 
 return this.itemCount() - pageIndex * this.itemsPerPage; 
 } 
 else{ 
 return -1; 
 } 
} 
 
PaginationHelper.prototype.pageIndex = function(itemIndex) { 
 if(itemIndex >=0 && itemIndex < this.itemCount()){ 
 return Math.floor(itemIndex / this.itemsPerPage); 
 } 
 return -1; 
}

下载本文
显示全文
专题