分页

最新推荐文章于 2024-04-09 16:54:23 发布

开心的小尾叭

最新推荐文章于 2024-04-09 16:54:23 发布

阅读量75

点赞数

分类专栏：前端-Jquery

本文链接：https://blog.csdn.net/weixin_39406672/article/details/105183293

版权

前端-Jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最简单的分页

<!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>Document</title>
</head>
<body>
        <table id="idData" width="70%">
          <tr><td>user1</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user2</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user3</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user4</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user5</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user6</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user7</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user8</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user9</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user10</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user11</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user12</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user13</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user14</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user15</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user16</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user17</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user18</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user19</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user20</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user21</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user22</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user23</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user24</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user25</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user26</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user27</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user28</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user29</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user30</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        </table>
        <table width="60%" align="right">
          <tr><td><div id="barcon" name="barcon"></div></td></tr>
        </table>
    <script src="./jquery.min.js"></script>
   <script>
    
        function goPage(pno){
    var itable = document.getElementById("idData");
    var num = itable.rows.length;//表格所有行数(所有记录数)
    var totalPage = 0;//总页数
    var pageSize = 4;//每页显示行数
    var range=20; //页码显示范围
    //总共分几页
    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
    
    //遍历显示数据实现分页
    for(var i=1;i<(num+1);i++){
        var irow = itable.rows[i-1];
        if(i>=startRow && i<=endRow){
            irow.style.display = "table-row";
        }else{
            irow.style.display = "none";
        }
    }
    var tempStr = "<span>共"+totalPage+"页</span>";
 
    if(currentPage>1){
        tempStr += "<span class='btn' href=\"#\" onClick=\"goPage("+(1)+")\">首页</span>";
        tempStr += "<span class='btn' href=\"#\" onClick=\"goPage("+(currentPage-1)+")\">上一页</span>"
    }else{
        tempStr += "<span class='btn'>首页</span>";
        tempStr += "<span class='btn'>上一页</span>";
    }
    //根据页码范围来动态控制页码
    if(totalPage<=range){
    for(var pageIndex= 1;pageIndex<totalPage+1;pageIndex++){
        tempStr += "<a οnclick=\"goPage("+pageIndex+")\"><span>"+ pageIndex +"</span></a>";
     }
    }else{
              if(currentPage>=totalPage-range){
                  var startPage = totalPage-range;
                  for(var i=startPage; i<=totalPage;i++){
                    tempStr += "<a οnclick=\"goPage("+i+")\"><span>"+ i +"</span></a>";

                }
              }else{
                  var startPage=currentPage;
                  for(var i =startPage;i<=startPage+range;i++){
                    tempStr += "<a οnclick=\"goPage("+i+")\"><span>"+ i +"</span></a>";
                }
              }
          }
    if(currentPage<totalPage){
        tempStr += "<span class='btn' href=\"#\" onClick=\"goPage("+(currentPage+1)+")\">下一页</span>";
       
        tempStr += "<span class='btn' href=\"#\" onClick=\"goPage("+(totalPage)+")\">尾页</span>";
    }else{
        tempStr += "<span class='btn'>下一页</span>";
        tempStr += "<span class='btn'>尾页</span>";
    }
    document.getElementById("barcon").innerHTML = tempStr;
   
}
goPage(1);
    
   </script>
</body>
</html>

开心的小尾叭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分页

最简单的分页<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
复制链接

扫一扫

专栏目录