一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2022-06-25 15:57:51 编辑:袖梨 来源:一聚教程网

本文实例讲述了JS基于封装函数实现的表格分页。分享给大家供大家参考,具体如下:

HTML代码:



www.jb51.net 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

script.js:

/**
 * 分页函数
 * 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=startRow && i1){
    tempStr += "";
    tempStr += "";
    tempStr += "";
  }else{
    tempStr += "下一页>";
    tempStr += "尾页";
  }
  document.getElementById("barcon").innerHTML = tempStr;
}

使用在线HTML/CSS/JavaScript代码运行工具 测试运行效果如下:

热门栏目