js分页功能

less代码

/*分页tj-paging*/
@colorda: #dadada;
@colormain: #1fafe9;
@color6: #666;
@color69: #999;
.tj-paging{
    ul{
        float: right;
        li{
            list-style: none;
            float: left;
            text-align: center;
            border: 1px solid @colorda;
            margin-left: -1px;
            &.tj-paging-item a{
                display: block;
                line-height: 36px;
                padding: 0 15px;
                color: @color6;
                &:hover{
                    text-decoration: none;
                    color: @colormain;
                }
            }
            &.tj-paging-disabled a{
                color: @color9;
                &:hover{
                    color: @color9;
                }  
            } 
            &.tj-paging-check a{
                color: @colormain;
            }
        }
    }
}
复制代码

js代码

function pageRender(data) { //分页渲染
    var totalPage = Math.ceil(data.totalCount/data.pageCount);
    var curPage = data.curPage;
    //container 容器，count 总页数 pageindex 当前页数
    function setPage(count, pageindex) {
    var a = [];
      //总页数少于10 全部显示,大于10 显示前3 后3 中间3 其余....
      if (pageindex == 1) {
        a[a.length] = "<li class=\"tj-paging-item tj-paging-disabled\"><a href=\"###\" class=\"prev unclick\">上一页</a></li>";
      } else {
        a[a.length] = "<li class=\"tj-paging-item\"><a href=\"###\" class=\"prev\" onclick=\"pageclick("+(curPage-1)+")\">上一页</a></li>";
      }
      function setPageList() {
        if (pageindex == i) {
          a[a.length] = "<li class=\"tj-paging-item tj-paging-check\"><a href=\"###\" class=\"on\" onclick=\"pageclick("+i+")\">" + i + "</a></li>";
        } else {
          a[a.length] = "<li class=\"tj-paging-item\"><a href=\"###\" onclick=\"pageclick("+i+")\">" + i + "</a></li>";
        }
      }
      //总页数小于10
      if (count <= 10) {
        for (var i = 1; i <= count; i++) {
          setPageList();
        }
      }
      //总页数大于10页
      else {
        if (pageindex <= 4) {
          for (var i = 1; i <= 5; i++) {
            setPageList();
          }
          a[a.length] = "<li class=\"tj-paging-item\"><a href=\"###\">...</a></li><li class=\"tj-paging-item\"><a href=\"###\" onclick=\"pageclick("+count+")\">" + count + "</a></li>";
        } else if (pageindex >= count - 3) {
          a[a.length] = "<li class=\"tj-paging-item\"><a href=\"###\" onclick=\"pageclick(1)\">1</a></li><li class=\"tj-paging-item\"><a href=\"###\">...</a></li>";
          for (var i = count - 4; i <= count; i++) {
            setPageList();
          }
        }
        else { //当前页在中间部分
          a[a.length] = "<li class=\"tj-paging-item\"><a href=\"###\" onclick=\"pageclick(1)\">1</a></li><li class=\"tj-paging-item\"><a href=\"###\">...</a></li>";
          for (var i = pageindex - 2; i <= pageindex + 2; i++) {
            setPageList();
          }
          a[a.length] = "<li class=\"tj-paging-item\"><a href=\"###\">...</a></li><li class=\"tj-paging-item\"><a href=\"###\" onclick=\"pageclick("+count+")\">" + count + "</a></li>";
        }
      }
      if (pageindex == count) {
        a[a.length] = "<li class=\"tj-paging-item tj-paging-disabled\"><a href=\"###\" class=\"next unclick\">下一页</a></li>";
      } else {
        a[a.length] = "<li class=\"tj-paging-item\"><a href=\"###\" class=\"next\" onclick=\"pageclick("+(curPage+1)+")\">下一页</a></li>";
      }
      return a.join("");
       //事件点击
    }
    return setPage(totalPage,curPage);
}
复制代码

效果