优德娱乐场w88手机版:一个值得你收藏的教程网站

最新下载

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

时间:2018-07-02 14:17:54 编辑:猪哥 来源:转载

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

HTML代码:




www.jb51.net js表格分页
<script type="text/javascript" src="script.js"></script>
 


  
测试编号125单元格1单元格2
测试编号225单元格1单元格2
测试编号325单元格1单元格2
测试编号425单元格1单元格2
测试编号525单元格1单元格2
测试编号625单元格1单元格2
测试编号725单元格1单元格2
测试编号825单元格1单元格2
测试编号925单元格1单元格2
测试编号1025单元格1单元格2
测试编号1125单元格1单元格2
测试编号1225单元格1单元格2
测试编号1325单元格1单元格2
测试编号1425单元格1单元格2
测试编号1525单元格1单元格2
测试编号1625单元格1单元格2
测试编号1725单元格1单元格2
测试编号1825单元格1单元格2
测试编号1925单元格1单元格2
测试编号2025单元格1单元格2
测试编号2125单元格1单元格2
测试编号2225单元格1单元格2
测试编号2325单元格1单元格2
测试编号2425单元格1单元格2
测试编号2525单元格1单元格2
测试编号2625单元格1单元格2
测试编号2725单元格1单元格2
测试编号2825单元格1单元格2
测试编号2925单元格1单元格2
测试编号3025单元格1单元格2
测试编号3125单元格1单元格2
测试编号3225单元格1单元格2
测试编号3325单元格1单元格2
测试编号3425单元格1单元格2
测试编号3525单元格1单元格2
测试编号3625单元格1单元格2
测试编号3725单元格1单元格2
测试编号3825单元格1单元格2
测试编号3925单元格1单元格2
测试编号4025单元格1单元格2
<script type="text/javascript" language="javascript"> window.onload = function(){ goPage(1,10); }; </script>

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<(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 += "优德娱乐场w88手机版";
    tempStr += "<上一页"
  }else{
    tempStr += "优德娱乐场w88手机版";
    tempStr += "<上一页";
  }
  if(currentPage下一页>";
    tempStr += "尾页";
  }else{
    tempStr += "下一页>";
    tempStr += "尾页";
  }
  document.getElementById("barcon").innerHTML = tempStr;
}

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun测试运行效果如下:

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

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

文章评论

热门栏目

XML 地图 | Sitemap 地图