最基础且最常见的需求之一，于前端开发里是分页功能。许多新手，在拿到数据后，不知怎样去拆开长列表。今日就分享一个完整过程，其为纯JS实现分页，不依赖任何第三方库，代码能够直接复制到项目里使用。

分页的核心思路

数据显示范围的控制，这便是分页的本质所在。举例来说呀，要是总共有一百条数据，而每页显示十条，那么这般的话，第一页所显示的便是从第一条到第十条，第二页所显示的则是从第十一条到第二十条。在此处最为关键的两个变量呢，便是“当前页码”以及“每页条数”。我们于JS里面借助currentPage和pageSize去记录它们，然后再凭着slice方法从完整的数据里截取当前页需要展示的那一段内容。

在进行实现操作时，首先要获取到全部的数据，随之监听页码按钮所触发的点击事件。在每一次点击页码之际，便要再度计算全新的起始索引以及结束索引，之后重新开展页面的渲染工作。整个流程并不需要对浏览器进行刷新，数据的改变完全是由JS施行驱动的，因而体验显得极为流畅。众多开发者极易忽视的一点乃是边界判断，举例来说，当当前页面跳转至第一页或者最后一页之时，按钮的状态应当随之发生变化。

HTML结构如何搭建

HTML部分没必要太过复杂，主要涵盖两块内容：一是用作展示数据的容器，二是用于放置分页按钮的容器。一般会选用一个ul或者div当作数据列表，而后在下方放置一组button或者a标签来进行页码切换。为了能够让样式更为美观些，可以给页码按钮添加上统一的class，以此方便随后运用CSS去操控间距以及当前页的高亮效果。

在二零一八年那个时候，好多项目依旧支持IE8，因而示例之中采用了最为质朴的div加上span的组合。于实际开发期间，能够依据项目情形更换成更具语义化的标签。重点在于要给数据容器设定一个id，比如说listBox，给分页容器同样设定一个id，比如说pagination，如此一来JS便能够借助document.getElementById精确找到它们，开展动态内容的填充。

  

    
user2
25
男
山西吕梁
    
user3
25
男
山西吕梁
    
user4
25
男
山西吕梁
  
  

数据初始化与渲染逻辑

设想一下，倘若我们拥有五十条测试数据，那么能够先借助数组去生成，其中每条数据都涵盖标题以及简介。在进行初始化操作的时候，定义全局变量：totalData用来存放所有的数据，pageSize设定为十，currentPage设定为一。接着去撰写一个render函数，此函数依据currentPage以及pageSize计算得出start和end，借助slice去截取数据，随后通过循环将其拼接到数据容器当中。把innerHTML用于拼接，相较于appendChild，它会显得更直观些，不过呢，得留意性能这方面的情况，当数据量并非极大的时候，那就基本能够满足使用需求了。

在将数据渲染完成之后，紧接着便要对分页按钮进行渲染，为此，得先计算出那总页数，其需借助Math.ceil(totalData.length / pageSize)来获取，之后，要动态地生成按钮，有第一页、上一页、页码数字、下一页、最后一页，其中，页码数字部分能够通过循环去生成，给当前页的按钮添加上active类名，以此便于进行高亮显示，在把所有按钮的HTML生成完毕后，将其一次性插入到分页容器当中，从而避免出现多次DOM操作的情况。

/**
 * 分页函数
 * pno--页数
 * psize--每页显示记录数
 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
 * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
 **/
function goPage(pno,psize){
  var itable = document.getElementById("idData");
  var num = itable.rows.length;//表格所有行数(所有记录数)
  console.log(num);
  var totalPage = 0;//总页数
  var pageSize = psize;//每页显示行数
  //总共分几页
  if(num/pageSize > parseInt(num/pageSize)){
      totalPage=parseInt(num/pageSize)+1;
    }else{
      totalPage=parseInt(num/pageSize);
    }
  var currentPage = pno;//当前页数
  var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 31
    var endRow = currentPage * pageSize;//结束显示的行  40
    endRow = (endRow > num)? num : endRow;  //40
    console.log(endRow);
    //遍历显示数据实现分页
  for(var i=1;i<(num+1);i++){
    var irow = itable.rows[i-1];
    if(i>=startRow && i<=endRow){
      irow.style.display = "block";
    }else{
      irow.style.display = "none";
    }
  }
  var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
  if(currentPage>1){
    tempStr += "首页";
    tempStr += "<上一页"
  }else{
    tempStr += "首页";
    tempStr += "<上一页";
  }
  if(currentPage下一页>";
    tempStr += "尾页";
  }else{
    tempStr += "下一页>";
    tempStr += "尾页";
  }
  document.getElementById("barcon").innerHTML = tempStr;
}

事件绑定与页面跳转

先找出分页功能里最核心的交互，那便是点击按钮时会触发页码切换，我们用事件委托的方式，亦即在分页容器其具相关性系之分结构关联的父级去监听click事件，借由判定event.target的tagName以及class来分辨点击的究竟是哪一个按钮，倘若点击了“下一页”，便将currentPage加上1，接着再度发起render函数的调动动作。当点击页码数字时，把currentPage改为与之对应的数字，同样再次展开渲染操作。

实现之际，必须留意几个边界情况，当当前页等同于第一页之时，致使“上一页”以及“第一页”按钮应当予以禁用或者进行隐藏，若是当前页等于最后一页，那么“下一页”以及“最后一页”同样也要进行禁用之操作。而禁用之举措，可以借助给按钮增添disabled属性，或者直接将按钮的样式修改为灰色，同时还要对点击事件的进一步处理予以阻止。这些细微之处，会对直接用户体验产生影响，诸多上线之后出现的bug，皆是源于边界条件未曾判断明晰。

动态数据与性能优化

  

    
user1
25
男
山西吕梁
    
user2
25
男
山西吕梁
    
user3
25
男
山西吕梁
    
user4
25
男
山西吕梁
    
user5
25
男
山西吕梁
    
user6
25
男
山西吕梁
    
user7
25
男
山西吕梁
    
user8
25
男
山西吕梁
    
user9
25
男
山西吕梁
    
user10
25
男
山西吕梁
    
user11
25
男
山西吕梁
    
user12
25
男
山西吕梁
    
user13
25
男
山西吕梁
    
user14
25
男
山西吕梁
    
user15
25
男
山西吕梁
    
user16
25
男
山西吕梁
    
user17
25
男
山西吕梁
    
user18
25
男
山西吕梁
    
user19
25
男
山西吕梁
    
user20
25
男
山西吕梁
    
user21
25
男
山西吕梁
    
user22
25
男
山西吕梁
    
user23
25
男
山西吕梁
    
user24
25
男
山西吕梁
    
user25
25
男
山西吕梁
    
user26
25
男
山西吕梁
    
user27
25
男
山西吕梁
    
user28
25
男
山西吕梁
    
user29
25
男
山西吕梁
    
user30
25
男
山西吕梁
  
  

于实际项目当中，数据常常源自后端接口，或许存在为异步请求的状况。在此情形下，分页逻辑需加以调整：每当切换页码之际，再度向服务器请求对应页的数据，并非使前端一次性获取全部数据。采用这样服务端分页的方式更为常见，能够减轻浏览器的内存压力，特别适宜于数据量较多此等场景。前端需将currentPage以及pageSize传递至后端，而后端则返回对应页的数据与总条数。

在性能优化这块儿，假设前端进行分页并且数据量相对较大（就好比有几千条那种情形），要是一次性把所有DOM都渲染出来，就会出现卡顿现象。此时能够考虑运用文档片段DocumentFragment这个东西，先将所有打算插入的元素都放进片段里头，最后一次性把这些全部添加到页面上去，以此来减小重排重绘的情况。除此之外，相比较于给每个按钮逐一单独绑定事件而言，事件委托在性能方面表现得更好，特别是当页码数量很多的时候，它能够防止大量事件监听器去占用内存。

常见问题与调试技巧

有几种分页功能常见的bug：点击页码之后数据没有变化，通常是slice的索引计算错误所致，或者在重新渲染时忘掉清空原本的数据容器；页码按钮显示不正确，也许是总页数计算出现差错，例如使用了Math.floor而非Math.ceil；快速点击页码之际出现重复请求，这种情形需要添加防抖或节流，或者设置一个请求锁。

进行调试之际，能够借助console.log将currentPage、start、end以及截取之后的数据长度予以打印呈现，如此很快便能够对问题加以定位出具体所在。另外，在2018年的诸多示例代码之中，为了达成兼容性会编写诸多判断情形，像是运用addEventListener抑或是attachEvent。如今进行开发能够精简这些写法情形，要是使用的属于现代浏览器，那么可以安心放心地运用class以及箭头函数，代码将会更加简洁明了。

虽然分页功能看上去简单，不过其中涵盖了数组操作，还有DOM渲染，以及事件处理，甚至边界判断等诸多知识点，是相当不错的练手项目。于你们实际开发期间，究竟更倾向于将分页交付给后端予以处理，还是前端一次性把数据获取后再实施分页呢？欢迎在评论区分享各位的做法，要是觉着文章有价值的话记得点个赞予以支持哟。