JS实现的简单分页功能示例

作者:袖梨 2022-06-25

本文实例讲述了JS实现的简单分页功能。分享给大家供大家参考,具体如下:

HTML部分:

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

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;
}

完整测试示例:




www.jb51.net JS分页



  
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 男 山西吕梁

运行效果图:

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:测试一下运行效果

相关文章

精彩推荐