JQuery动态生成页码条（只需修改Post请求即可）

先来个DIV存放页码条（Bar）

<div class="page-icon"  id="pageBar">
    </div>

导入JS，只需修改post请求的数据，其他不需要修改

///文档使用说明
//1、一个页面显示5条，已写死，必要时可以从HTML中获取并复制给pageSize（仅赋值给定义的pageSize即可）
//2、开始时，需调用PutDataToTable向第一个界面加载数据（可改写）
//3、post请求返回时，需要返回总数，除了需要修改Post请求其余都不需要修改
$(document).ready(function () {
    var pageSize = 5;//可获取
    PutDataToTable(1, pageSize);

})
//自动获取页码条，根据数据总个数自动生成
function GetPageBar(pageIndex, total) {
    var pageSize = 5;
    var pageCount = Math.ceil(total / pageSize);
    $("#pageBar").html("");
    if (pageCount == 1) {
        $("#pageBar").html("");
    }
    var start = pageIndex - 5;
    if (start < 1) {
        start = 1;
    }
    var end = start + 9;//等于pageSize*2-1
    if (end > pageCount) {
        end = pageCount;
    }
    if (pageIndex == 1) {
        $("#pageBar").append(" <span class='page-disabled' >上一页</span>");
    }
    else {
        $("#pageBar").append(" <a class='page-next' onclick='ChangePage(" + (parseInt(pageIndex) - 1) + "," + total + ")'>上一页</a>");
    }
    for (var i = start; i <= end; i++) {
        if (i == pageIndex) {
            $("#pageBar").append("<span class='page-current' >" + i + "</span>");
        }
        else {
            $("#pageBar").append("<a  onclick='ChangePage(" + i + "," + total + ")'>" + i + "</a>");
        }
    }
    if (pageIndex == pageCount) {
        $("#pageBar").append(" <span class='page-disabled'>下一页</span>");
    }
    else {
        $("#pageBar").append(" <span class='page-next' onclick='ChangePage(" + (parseInt(pageIndex) + 1) + "," + total + ")'>下一页</span>");
    }
}
//点击123页或者上一页或者下一页执行的点击事件
function ChangePage(pageIndex, total) {
    var pageSize = 5;
    var total = PutDataToTable(pageIndex, pageSize);
    GetPageBar(pageIndex, total);
}
//通过Post请求向表格dataShow中添加数据
function PutDataToTable(pageIndex, pageSize) {
    
    $("#dataShow").html("");

    $.post("/UserInfo/GetPageUserInfo", { "pageIndex": pageIndex, "pageSize": pageSize }, function (data) {

        for (var i = 0; i < data.userInfo.length; i++) {
            $("#dataShow").append("<tr><td>" + data.userInfo[i].UId + "</td><td>" + data.userInfo[i].UName + "</td><td>" + data.userInfo[i].UPwd + "</td><td>" + ChangeDateFormat(data.userInfo[i].SubTime) + "</td></tr>")
        }
        GetPageBar(pageIndex, data.total);

    })
}
//转时间
function ChangeDateFormat(cellval) {
    var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    return date.getFullYear() + "/" + month + "/" + currentDate;
}

最后给页码条加上css样式

.page-icon {
    margin: 20px 0 0 0; /*设置距离顶部20像素*/
    font-size: 0; /*修复行内元素之间空隙间隔*/
    text-align: center; /*设置内容居中显示*/
}

    /*设置共有的的样式布局，主要是进行代码优化，提高运行效率*/
    .page-icon a, .page-disabled, .page-next {
        border: 1px solid #ccc;
        border-radius: 10px; /*角的弧度*/
        padding: 4px 10px 5px; /*大小*/
        font-size: 15PX; /*字体大小*/
        margin-right: 10px; /*修复行内元素之间空隙间隔*/
        cursor: pointer;/*光标放上后的手型*/
    }

.page-current {
    border: 1px solid #ccc;
    border-radius: 10px; /*角的弧度*/
    color: #ff0000;
    padding: 4px 10px 5px;
    font-size: 14PX;
    margin-right: 10px; /*修复行内元素之间空隙间隔*/
}

.page-disabled {
    color: #ccc;
}