当前位置: 首页 > 工具软件 > RowGrid.js > 使用案例 >

js分页

危卜鹰
2023-12-01
说起数据分页,就不得不提本人经历的第一次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分页工具就知道了。



 类似资料: