js分页带页码方法

 

 效果图

<div class="page_c_warp">
            <div class="pageContent">
                <ul class="page" id="page">
                </ul>            
            </div>
        </div>

1：放置分页码位置

2：js代码，可以直接复制

<!-- 分页数据 -->
<script>
  /**
   * 分页函数
   * pno--页数
   * thispage--当前页数
   * psize--每页显示记录数
   * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
   * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
   **/
  function goPage(pno,psize){
      var itable = document.getElementById("container");
      var num = itable.getElementsByClassName("questions").length;//表格所有行数(所有记录数)
      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(totalPage);
         //遍历显示数据实现分页
      for(var i=1;i<(num+1);i++){    
          var irow = itable.getElementsByClassName("questions")[i-1];
          if(i>=startRow && i<=endRow){
              irow.style.display = "block";    
          }else{
              irow.style.display = "none";
          }
      }
      var pageEnd = document.getElementById("pageEnd");
      var tempStr = "";
      var i = 1;
      if(currentPage>1){
          tempStr += "<li><a href=\"javascript:;\" onClick=\"goPage("+(1)+","+psize+")\">首页</a></li>";
          tempStr += "<li><a href=\"javascript:;\" onClick=\"goPage("+(currentPage-1)+","+psize+")\">上一页</a></li>"
      }else{
          tempStr += "<li>首页</li>";
          tempStr += "<li>上一页</li>";    
      }

    if (totalPage <= 5 ) {//总页数小于五页，则加载所有页
                
        for (i; i <= totalPage; i++) {
            if (i == currentPage) {
                tempStr += "<li class=\"thisclass\">"+i+"</li>"; 
            }else{
                tempStr += "<li><a href=\"javascript:;\" onClick=\"goPage("+i+","+psize+")\">"+i+"</a></li>"; 
            }
        };

    }else if (totalPage > 5) {//总页数大于五页，则加载五页
        if (currentPage < 5) {//当前页小于5，加载1-5页
            for (i; i <= 5; i++) {
                if (i == currentPage) {
                    tempStr += "<li class=\"thisclass\">"+i+"</li>"; 
                }else{
                    tempStr += "<li><a href=\"javascript:;\" onClick=\"goPage("+i+","+psize+")\">"+i+"</a></li>"; 
                }
            };
            // if (currentPage <= totalPage-2) {//最后一页追加“...”代表省略的页
            //     tempStr += "<li> . . . </li>";
            // }

        }else if (currentPage >= 5) {//当前页大于5页
            for (i; i <= 2; i++) {//1,2页码始终显示
                tempStr += "<li><a href=\"javascript:;\" onClick=\"goPage("+i+","+psize+")\">"+i+"</a></li>"; 
            }
            // tempStr += "<li> . . . </li>";//2页码后面用...代替部分未显示的页码
            if (currentPage+1 == totalPage) {//当前页+1等于总页码
                for(i = currentPage-1; i <= totalPage; i++){//“...”后面跟三个页码当前页居中显示
                    if (i == currentPage) { 
                        tempStr += "<li class=\"thisclass\">"+i+"</li>"; 
                    }else{
                        tempStr += "<li><a href=\"javascript:;\" onClick=\"goPage("+i+","+psize+")\">"+i+"</a></li>"; 
                    }
                }
            }else if (currentPage == totalPage) {//当前页数等于总页数则是最后一页页码显示在最后
                for(i = currentPage-2; i <= totalPage; i++){//...后面跟三个页码当前页居中显示
                    if (i == currentPage) {
                        tempStr += "<li class=\"thisclass\">"+i+"</li>"; 
                    }else{
                        tempStr += "<li><a href=\"javascript:;\" onClick=\"goPage("+i+","+psize+")\">"+i+"</a></li>"; 
                    }
                }
            }else{//当前页小于总页数，则最后一页后面跟...
                for(i = currentPage-1; i <= currentPage+1; i++){//currentPage+1页后面...
                    if (i == currentPage) {
                        tempStr += "<li class=\"thisclass\">"+i+"</li>"; 
                    }else{
                        tempStr += "<li><a href=\"javascript:;\" onClick=\"goPage("+i+","+psize+")\">"+i+"</a></li>"; 
                    }
                }
                // tempStr += "<li> . . . </li>";
            }
        }
    }
      

      if(currentPage<totalPage){
          tempStr += "<li><a href=\"javascript:;\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页</a></li>";
          tempStr += "<li><a href=\"javascript:;\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a></li>";
      }else{
          tempStr += "<li>下一页</li>";
          tempStr += "<li>尾页</li>";    
      }

      tempStr += "<li>共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页</li>";
      document.getElementById("page").innerHTML = tempStr;
  }

</script>

 

 

 上面两个抓取是这个节点，获取有多少条数据

 

3：在body标签加上

<body onLoad="goPage(1,5);">

第一个参数是页数，第二个参数显示几条

执行这个函数，或者可以用别的方法，可以尝试一下

 

附上样式代码css

<style>
.page_c_warp {
    text-align: center;
    margin-top: 30px;
}
.page_c_warp .page li {
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #eaeaea;
    height: 17px;
    line-height: 17px;
    margin-left: -1px;
    font-size: 12px;
    color: #666;
    float:left;
}
.page .thisclass {
    background: #377bee;
    color: #fff!important;
}
</style>

 

 

 

搜索

复制