jQuery JavaScript 分页模板

/*
pageIndex 当前页面索引
pageSize 每页显示条数
total 数据总条数
*/
function BindPageList(pageIndex, pageSize, total) {
    var str = "";
    var totalPages = Number(Math.ceil(total / pageSize)); //总页数
    if(totalPages>1){//只有页数大于1的时候才显示分页
        var startnum = 1, endnum = 10;
        if (Number(pageIndex) > 5 && Number(pageIndex) + 5 <= totalPages)
        {
            startnum = Number(pageIndex) - 5;
            endnum = Number(pageIndex) + 5;
        }
        else if (Number(pageIndex) + 5 > totalPages)
        {

            endnum = totalPages;
            if (totalPages > 10)
            {
                startnum = totalPages - 10;
            }
        }
        if (Number(pageIndex) > 1) {
            str += "<a href='?pageIndex=1&pageSize=" + pageSize + "'>首页</a><a href='?pageIndex=" + (Number(pageIndex) - 1) + "&pageSize=" + pageSize + "'>上一页</a>";
        }
        for (var i = startnum; i <= endnum; i++)
        {
            if (i <= totalPages)
            {
                if (Number(pageIndex) == i)
                {
                    str += "<span>" + i + "</span>";
                    continue;
                }
                str += "<a href='?pageIndex=" + i + "&pageSize=" + pageSize + "'>" + i + "</a>";
            }
        }
        if (Number(pageIndex) < totalPages) {
            str += "<a href='?pageIndex=" + (Number(pageIndex) + 1) + "&pageSize=" + pageSize + "'>下一页</a><a href='?pageIndex=" + totalPages + "&pageSize=" + pageSize + "'>末页</a>";
        }


    }
    return str;
}

css

/*分页，使分页显示在上一个元素的右下角*/
#PageList {
    top: 10px;
    position: relative;
    display: block;
    height: 20px;
    line-height: 20px;
    margin-bottom: 5px;
  width: auto;
    float: right;
    right: 0;
}

#PageList a{
    text-decoration:none;
    /*color:#005aa0;*/
    color: #4974A4;
    border:1px solid #ccc;
    display:inline-block;
    border-radius:2px;
    margin-left:2px;
    padding:0 6px;
    font-size:12PX;/*修复行内元素之间空隙间隔*/
}


#PageList a:hover{
    /*background:#ff6600;*/
     background-color: #4974A4;
        color: white;
        
        
}

#PageList span{
    color:#ff6600;
    padding:4px 10px 5px;
     margin-left:2px;
    font-size:12PX;/*修复行内元素之间空隙间隔*/
}

×

fengxianqi

(๑＞ڡ＜)☆谢谢老板~

2元 5元 10元 50元 100元 任意金额

2元

使用微信扫描二维码完成支付