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代码运行工具:测试一下运行效果

相关文章

精彩推荐