zoukankan      html  css  js  c++  java
  • 分页研究【前端】(一)入门

    分页是又基础又重要的功能,常常用于大量数据。简单说,有一堆数据,比如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的值一定得小于数据的长度。

    二、列表操作的问题

  • 相关阅读:
    Remote Procedure Call (RPC) Locator与X3
    Delphi的悬浮窗口
    改变CSS样式
    JavaScript 打印Web页面指定区域的信息
    判断页面元素存在与否
    如何处理HTML标签属性
    jQuery 获取和设置表单元素
    如何添加/移除CSS类
    处理网页内容
    正则表达式 收集
  • 原文地址:https://www.cnblogs.com/tinaluo/p/9164309.html
Copyright © 2011-2022 走看看