分页研究【前端】(一)入门

分页是又基础又重要的功能,常常用于大量数据。简单说,有一堆数据,比如100条,1000条,然后按照每页N个进行显示,其模型是比较简单的。现在写个专题来探讨一下。

一、取数据的问题

为了简化说明,把数据抽象成数组,假定有100条数据,按照每5条为一组进行分页。参看下图

如上图所示,左侧为数据,临时容器就是暂存,比如暂存5条数据,实际渲染的就是临时容器的内容。

现在看一下对应关系

页        取数据范围
1   0-4
2   5-9
3   10-14
.....

一、计算取值范围(公式必背)

设变量currentPage=当前页,每页分组条数为N,则可以得出如下结果:

(currentPage-1)*N =< scope < currentPage*N

其中,(currentPage-1)*N为范围头部,currentPage*N为尾部。

代码如下:

for (var i = (currentPage - 1) * N, len = data.length; i < currentPage * N && i < len; i++) {
                容器.push(data[i]);
            }

这里有个需要注意的问题,分组的整数倍总是大于或等于数据的总长度!所以在循环要判断i的值一定得小于数据的长度。

二、列表操作的问题

原文地址:https://www.cnblogs.com/tinaluo/p/9164309.html