Collect~腾一个简单易用的分页

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>分页</title>
<script>
/**
 * 分页函数
 * 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 tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
  if(currentPage>1){
    tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
    tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
  }else{
    tempStr += "首页";
    tempStr += "<上一页";
  }
  if(currentPage<totalPage){
    tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
    tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
  }else{
    tempStr += "下一页>";
    tempStr += "尾页";
  }
  document.getElementById("barcon").innerHTML = tempStr;
}
</script>
</head>
<body onLoad="goPage(1,10);">
  <table id="idData" width="70%">
    <tr><td>user1</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user2</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user3</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user4</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user5</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user6</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user7</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user8</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user9</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user10</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user11</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user12</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user13</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user14</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user15</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user16</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user17</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user18</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user19</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user20</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user21</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user22</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user23</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user24</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user25</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user26</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user27</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user28</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user29</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
    <tr><td>user30</td><td>25</td><td>person</td><td>BUBU_Sourire</td></tr>
  </table>
  <table width="60%" align="right">
    <tr><td><div id="barcon" name="barcon"></div></td></tr>
  </table>
</body>
</html>
Collect~腾一个简单易用的分页

猜你喜欢
