原生js分页

Posted aSnow

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js分页相关的知识，希望对你有一定的参考价值。

<html>
<head>
    <meta charset=‘utf-8‘>


 <style type="text/css">
    #idData {color: red;border: solid;text-align: center;}
    a{text-decoration: none;}
    .on{background-color: red;}
 </style>
</head>
<body onLoad="goPage(1,2);">
     <tr><td>liujinzhong1</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <table id="idData" width="70%" >        
        <tr><td>liujinzhong1</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong2</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong3</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong4</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong5</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong6</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong7</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong8</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong9</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong10</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong11</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong12</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong13</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong14</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong15</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong16</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong17</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong18</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong19</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong20</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong21</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong22</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong23</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong24</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong25</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong26</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong27</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong28</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong29</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong30</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong31</td><td>25</td><td>男</td><td>山西吕梁</td></tr>        
        <tr><td>liujinzhong32</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong33</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong34</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong35</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong36</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong37</td><td>25</td><td>男</td><td>山西吕梁</td></tr>        
        <tr><td>liujinzhong38</td><td>25</td><td>男</td><td>山西吕梁</td></tr>        
        <tr><td>liujinzhong39</td><td>25</td><td>男</td><td>山西吕梁</td></tr>        
        <tr><td>liujinzhong40</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong41</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
         <tr><td>liujinzhong42</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
         <tr><td>liujinzhong42</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
         <tr><td>liujinzhong42</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
         <tr><td>liujinzhong42</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>
    //goPage(pno,psize) pno当前页码 psize每页显示个数
        function goPage(pno,psize){
            var itable = document.getElementById("idData");
            var num = itable.rows.length;//表格所有行数(所有记录数)
            console.log(num);
            var totalPage = 0;//分多少页
            var pageSize = psize;//每页显示行数
            console.log(psize);

            //总共分几页 
            if(num%pageSize!=0){   
                    totalPage=parseInt(num/pageSize)+1;   
               }else{   
                   totalPage=parseInt(num/pageSize);   
               }   
                var currentPage = pno;//当前页数

                var startRow = (currentPage - 1) * pageSize+1;//每页开始的第一条数据
                var endRow = currentPage * pageSize;//每页的结束的一条数据
                endRow = (endRow > num)? num : endRow; 
                 var irow=itable.getElementsByTagName(‘tr‘);
                    for(var j=0;j<num;j++){
                        irow[j].style.display = "none";
                         for(var i=startRow-1;i<endRow;i++){
                             irow[i].style.display = "block"; 
                      }
                    }
                var pageEnd = document.getElementById("pageEnd");
                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>0&&currentPage<4){
                    for(var pageIndex=1;pageIndex<6;pageIndex++){
                            //如果当前页数和pageIndex相等就加on
                            if(pageIndex==currentPage){
                                tempStr += "<a class=\"on\" onclick=\"goPage("+pageIndex+","+psize+")\"><span>"+ pageIndex +"</span></a>";
                            }else{
                                tempStr += "<a onclick=\"goPage("+pageIndex+","+psize+")\"><span>"+ pageIndex +"</span></a>";
                            }
                            
                          }
                    }
                     if(totalPage-2>=currentPage&&currentPage>3){
                        tempStr += "...";
                        tempStr += "<a onclick=\"goPage("+(currentPage-2)+","+psize+")\"><span>"+ (currentPage-2) +"</span></a>";
                        tempStr += "<a onclick=\"goPage("+(currentPage-1)+","+psize+")\"><span>"+ (currentPage-1) +"</span></a>";
                        tempStr += "<a class=\"on\" onclick=\"goPage("+(currentPage)+","+psize+")\"><span>"+ currentPage +"</span></a>";
                        tempStr += "<a onclick=\"goPage("+(currentPage+1)+","+psize+")\"><span>"+ (currentPage+1) +"</span></a>";
                        tempStr += "<a onclick=\"goPage("+(currentPage+2)+","+psize+")\"><span>"+ (currentPage+2) +"</span></a>";
                        if(currentPage+2<totalPage){
                           tempStr += "...";
                        }
                     }
                     if(totalPage-1>=currentPage&&currentPage>totalPage-2){
                         
                        tempStr += "<a onclick=\"goPage("+(currentPage-3)+","+psize+")\"><span>"+ (currentPage-3) +"</span></a>";
                        tempStr += "<a onclick=\"goPage("+(currentPage-2)+","+psize+")\"><span>"+ (currentPage-2) +"</span></a>";
                        tempStr += "<a onclick=\"goPage("+(currentPage-1)+","+psize+")\"><span>"+ (currentPage-1) +"</span></a>";
                        tempStr += "<a  class=\"on\" onclick=\"goPage("+(currentPage)+","+psize+")\"><span>"+ currentPage +"</span></a>";
                         tempStr += "<a onclick=\"goPage("+(currentPage+1)+","+psize+")\"><span>"+ (currentPage+1) +"</span></a>";
                     }
                     if(currentPage+1>totalPage){
                        tempStr += "<a onclick=\"goPage("+(currentPage-4)+","+psize+")\"><span>"+ (currentPage-4) +"</span></a>";
                        tempStr += "<a onclick=\"goPage("+(currentPage-3)+","+psize+")\"><span>"+ (currentPage-3) +"</span></a>";
                        tempStr += "<a onclick=\"goPage("+(currentPage-2)+","+psize+")\"><span>"+ (currentPage-2) +"</span></a>";
                        tempStr += "<a onclick=\"goPage("+(currentPage-1)+","+psize+")\"><span>"+ (currentPage-1) +"</span></a>";
                        tempStr += "<a  class=\"on\" onclick=\"goPage("+(currentPage)+","+psize+")\"><span>"+ currentPage +"</span></a>";
                       
                     }  
                       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>
</body>

 

以上是关于原生js分页的主要内容，如果未能解决你的问题，请参考以下文章

原生js版分页插件

原生js分页

原生js开发AJAX数据分页缓存模块特效

原生js实现分页

原生js实现分页

原生js的分页插件