JS基于封装函数实现的表格分页完整示例

 


  

    
测试编号1
25
单元格1
单元格2
    
测试编号2
25
单元格1
单元格2
    
测试编号3
25
单元格1
单元格2
    
测试编号4
25
单元格1
单元格2
    
测试编号5
25
单元格1
单元格2
    
测试编号6
25
单元格1
单元格2
    
测试编号7
25
单元格1
单元格2
    
测试编号8
25
单元格1
单元格2
    
测试编号9
25
单元格1
单元格2
    
测试编号10
25
单元格1
单元格2
    
测试编号11
25
单元格1
单元格2
    
测试编号12
25
单元格1
单元格2
    
测试编号13
25
单元格1
单元格2
    
测试编号14
25
单元格1
单元格2
    
测试编号15
25
单元格1
单元格2
    
测试编号16
25
单元格1
单元格2
    
测试编号17
25
单元格1
单元格2
    
测试编号18
25
单元格1
单元格2
    
测试编号19
25
单元格1
单元格2
    
测试编号20
25
单元格1
单元格2
    
测试编号21
25
单元格1
单元格2
    
测试编号22
25
单元格1
单元格2
    
测试编号23
25
单元格1
单元格2
    
测试编号24
25
单元格1
单元格2
    
测试编号25
25
单元格1
单元格2
    
测试编号26
25
单元格1
单元格2
    
测试编号27
25
单元格1
单元格2
    
测试编号28
25
单元格1
单元格2
    
测试编号29
25
单元格1
单元格2
    
测试编号30
25
单元格1
单元格2
    
测试编号31
25
单元格1
单元格2
    
测试编号32
25
单元格1
单元格2
    
测试编号33
25
单元格1
单元格2
    
测试编号34
25
单元格1
单元格2
    
测试编号35
25
单元格1
单元格2
    
测试编号36
25
单元格1
单元格2
    
测试编号37
25
单元格1
单元格2
    
测试编号38
25
单元格1
单元格2
    
测试编号39
25
单元格1
单元格2
    
测试编号40
25
单元格1
单元格2
  
  

/**
 * 分页函数
 * 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 pageEnd = document.getElementById("pageEnd");
  var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
  if(currentPage>1){
    tempStr += "首页";
    tempStr += "<上一页"
  }else{
    tempStr += "首页";
    tempStr += "<上一页";
  }
  if(currentPage下一页>";
    tempStr += "尾页";
  }else{
    tempStr += "下一页>";
    tempStr += "尾页";
  }
  document.getElementById("barcon").innerHTML = tempStr;
}