js分页

说起数据分页，就不得不提本人经历的第一次web开发，负责的模块里就有一个分页展示数据的功能，当时可以说是费尽浑身解数才勉强完成一个复杂而又臃肿的页面。其实分页本身并不难，下面就是用纯js实现的一个小例子。

首先，创建分页展示的数据，这里的数据结构就不在赘述了，这些都是很基础的东西，w3school或者各种神书例如js权威指南上都讲得非常好，我就不献丑了。

var data = [
           {
name:"李渊",
age:60
}
,
 {
name:"李世民",
age:40
}
,
{
name:"李建成",
age:42
}
          ];

以及页面上的表和上一页下一页按钮

<table id="dataTable" border="1">
     <tr>
  <th>姓名</th>
  <th>年龄</th>
</tr>
   </table>
   <input type="button" id="previous" value="上一页"/><input type="button" id="next" value="下一页"/>


分页最重要的几个参数，页码，每页显示条数，下面定义一下：

   var pageSize = 1;
   var pageNo = 1;



还有上面的表和按钮，这里先取得他们的dom对象方便下面使用。
var tableDom = document.getElementById("dataTable");
var prePageButton = document.getElementById("previous");
var nextPageButton = document.getElementById("next");

变量的命名，可以随意，但是，起码自己要能看懂，对吧？

翻页无非就是根据页码来控制表格中的数据，所以，先定义一个turnPage函数，接收页码做参数，用于翻页

function turnPage(pageNo){}

每次翻页前，肯定得清空表格，所以，肯定都有下面这个函数，clearTable(),参数给不给无所谓了，如果要灵活一点，
可以传入像table dom或者id一类的参数，这里不传参数，因为前面已经获取了table对象了。

下面是这两个函数的具体实现，有简略的注释。

function turnPage(pNo){
     pageNo = pNo;//更新全局的pageNo的值，细细想想，有什么作用呢？
     //翻页第一步，清除表内数据，当然，表头一定要保留
clearTable();
//翻页第二步，计算新数据的在整个数据数据中的开始和结束下标
var beginPos = (pageNo-1)*pageSize;
var endPos = pageNo*pageSize;
//便利数据数组，组装行对象
for(var i=beginPos;i<endPos;i++){
  var dataRow = data[i];
  var name = dataRow.name;
  var age = dataRow.age;
  var rowGrid = tableDom.insertRow(1);
  var col1 = rowGrid.insertCell(0);
       var col2 = rowGrid.insertCell(1);
  col1.innerHTML = name;
  col2.innerHTML = age;
}
   }


   function clearTable(){
    var tSize = tableDom.rows.length;
//从第二行开始，循环删除行行
    for(var rn=1;rn<tSize;rn++){
      tableDom.deleteRow(1);
    }
   }

  有了上面这两个，可以来继续组装上一页和下一页函数

   function nextPage(){
     var nextPageNo = pageNo+1;
     turnPage(nextPageNo);
   }
   
   function prePage(){
    var prePageNo = pageNo-1;
    turnPage(prePageNo);
   }


   是不是很清晰了？


   页面载入的时候，虽然没有翻页，但是，表格得有数据吧？所以，得有下面这个函数。


    function initTable(){
       turnPage(pageNo);
prePageButton.addEventListener("onclick",prePage,false);
nextPageButton.addEventListener("click",nextPage,false);
   }
   同时还在翻页按钮上绑定了触发函数。


  
   最后，当然是一切奇迹的开始，页面载入完成后，让我们的翻页工具开始主宰世界吧。
   window.onload = function(){
    initTable();
   }


   好了，一个简单的翻页js完成了，简陋是简陋了一点，但是基本的架构就是这样子了。如果加上jquery，
   nextPage和prePage这两个函数就可以不要了，至于为什么，等下一章讲jquery分页工具就知道了。