javaScript：页码实现

javaScript：页码实现

在js页面实现数据分页（假设：每页显示n条数据，当前页码为page）

后台响应数据：1、数据总个数 2、page*n~page*n+n条数据显示信息

html：

<div class="page"></div>

css：

.page {
    float: left;
    width: 100%;
    height: 5%;
}
.page ul{
    width: 50%;
    height: 40px;
    margin-left: 40%;
}
.page ul li{
    float: left;
    width: 40px;
    height: 30px;
    font-size: 15px;
    line-height: 22px;
    margin-left: 10px;
    border: 2px solid #b1dae3;
    border-radius: 10px;
    color: white;
}
.page ul li a {
    color: white;
    font-weight: bold;
    font-size: 17px;
}
.page ul .noactive{
    background-color: #d4d3e1cc;
    cursor: not-allowed;
}
.page ul .noactive:hover{
    border: 2px solid #b1dae3;
}
.page ul .noactive a{
    cursor: not-allowed;
}
.page ul li:hover{
    border: 2px solid #8080ff;
}

js：

//页码加载（n为6，当前页码为x，x从1开始）
var sum = item.sum;    //sum为后台响应给的数据
str = '<ul>';
//计算总页数
if(sum%6 > 0) {        
    sum = parseInt(sum/6) + 1;
} else {
    sum = parseInt(sum/6);
}
//页面上最多显示5个页码，其中一个必定包括当前页码
var cnt = 4;
//当前页数为1时（考虑边界问题，解决除页码之外的符号（就是显示页码两边...的按钮））
if(x == 1) {    
    str += '<li class="noactive"><a>...</a></li>' + 
           '<li class="noactive"><a>1</a></li>';
} else {
    str += '<li><a href="javascript:void(0);">...</a></li>';
    //当前页面预计是应该放中间，左右两边各两个相邻页码
    var y = 2;
    //（sum-x）为大于当前页数的页码个数，若小于2，则重新计算当前页码左右两边显示的页码数
    if(sum-x < 2) {
        y = 4 - sum + x;
    }
    //y为左边应该显示的页码个数
    for(var i = x-y; i < x; i++) {
        //考虑边界超出问题
        if(i <= 0) {
            continue;
        }
        str += '<li><a href="javascript:void(0);">' + i + '</a></li>';
        cnt--;
    }
    str += '<li class="noactive"><a>' + x + '</a></li>';
}
//cnt大于0说明右边还可放置cnt个页码
for(var i = x; cnt > 0; i++) {
    //边界问题考虑
    if(i+1 <= sum) {
        str += '<li><a href="javascript:void(0);" onclick="Mywork.loadingWait(' + i + ', ' + temp + ')">' + (i+1) + '</a></li>';
        cnt--;
    } else {
        break;
    }
}
//右边可放置个数为0了，但右边仍有页码没有显示
if(cnt == 0 && x+2 < sum) {
    str += '<li><a href="javascript:void(0);">...</a></li>';
} else {
    str += '<li class="noactive"><a>...</a></li>';
}
str += '</ul>';
document.getElementById('page').innerHTML = str;

效果页面：

总页数为4，当前页数为1时的效果图 :

总页数为8，当前页数分别为4、6、8页时的效果图：

若有错误，请指出，谢谢^^