自己写的Ajax分页

Html:

<div class="pagging"><ul class="pagenumber"></ul></div>
<div class="tinfo right">共&nbsp;<span class="cpage"></span>&nbsp;页，<span class="crecord"></span>&nbsp;条记录</div>

Html调用：

<script type="text/javascript">
        PageInit();
</script>

CSS:

ul.pagenumber {
    list-style: none;
}

    ul.pagenumber li {
        float: left;
        margin: 3px 8px 0 0;
        width: 20px;
        cursor: pointer;
        background-color: #2d89ef;
        color: #fff;
        text-align: center;
        height: 20px;
        line-height: 20px;
    }

        ul.pagenumber li:hover, ul.pagenumber li.cli {
            background-color: #fff;
            color: #0b67cd;
        }

        ul.pagenumber li.prev, ul.pagenumber li.next {
            border: 0;
            background: none;
            margin-right: 8px;
            color: #fff;
            cursor: text;
        }

Jquery:

//分页
function getusers(page) {
    $.ajax({
        type: "POST",
        url: "/User/GetUserList",
        data: { p: page },
        dataType: "json",
        success: function (data) {
            var content = "<tr><th>姓名</th><th>性别</th><th>部门</th><th>操作</th></tr>";
            $.each(data.records, function (k, v) {
                content += "<tr><td>" + v.UserName + "</td><td>" + v.Gender + "</td><td>" + v.DeptName + "</td><td><a title='删除' onclick='del(this," + v.UserID + ");'></a></td>";
            });
            $(".usertable").html(content);
            $(".cpage").html(data.pages);
            $(".crecord").html(data.total);
        },
        async: false
    });
}

function liclick(th) {
    getusers($(th).html());
    pages = $(".cpage").html();
    $(".pagenumber li").removeClass("cli");
    $(th).addClass("cli");
    if (pages >= 10 && $(th).html() > 4 && $(th).html() < (pages - 3)) {
        var offset = $(th).html() - $(".page_content li:nth-child(4)").html();
        $(".page_content li").each(function () {
            $(this).html(Number($(this).html()) + offset);
        });
        $(".pagenumber li").removeClass("cli");
        $(".page_content li:nth-child(4)").addClass("cli");
    }
    else if (pages >= 10 && $(th).html() >= (pages - 3) && $(th).html() < Number(pages)) {
        var i = 7;
        var cur = $(th).html();
        $(".pagenumber li").removeClass("cli");
        $(".page_content li").each(function () {
            $(this).html(Number(pages) - i);
            i--;
            if ($(this).html() == cur)
                $(this).addClass("cli");
        });
    }
    else if (pages >= 10 && $(th).html() <= 4 && $(th).html() > 1) {
        var i = 2;
        var cur = $(th).html();
        $(".pagenumber li").removeClass("cli");
        $(".page_content li").each(function () {
            $(this).html(i);
            i++;
            if ($(this).html() == cur)
                $(this).addClass("cli");
        });
    }
}

function PageInit() {

    getusers(1);
    pages = $(".cpage").html();
    if (pages < 10) {
        for (var p = 1; p <= pages ; p++) {
            $(".pagenumber").append("<li>" + p + "</li>");
        }
    }
    else {
        $(".pagenumber").append("<li>1</li>");
        $(".pagenumber").append("<li class='prev'>...</li><span class='page_content'></span>");
        for (var p = 2; p < 9; p++) {
            $(".page_content").append("<li>" + p + "</li>");
        }
        $(".pagenumber").append("<li class='next'>...</li>");
        $(".pagenumber").append("<li>" + pages + "</li>");
    }

    $(".pagenumber li:first").addClass("cli");

    $(".pagenumber li").on("click", function () {
        liclick(this);
    });
}

增加用户：

$("#addok").click(function () {
    $.post("/User/Createuser", { name: $("#addname").val() }, function (data) {
        if (data == "ok") {
            $(".pagenumber").html("");
            PageInit();
            alert("用户新增成功！");
        }
    });
});

删除用户：

function del(th, id) {
    if (confirm("确认删除该用户吗？")) {
        $.post("/User/Deleteuser", { uid: id }, function (data) {
            var oldpage = $(".cpage").html();
            var currentpage = $(".cli").html();
            if (data == "ok") {
                getusers($(".cli").html());
                if (Number(oldpage) > Number($(".cpage").html())) {
                    $(".pagenumber").html("");
                    PageInit();
                    if (currentpage == oldpage) {
                        currentpage = currentpage - 1;
                    }
                    $(".pagenumber li").each(function () {
                        if ($(this).html() == currentpage) {
                            liclick(this);
                        }
                    });
                }
                alert("删除成功！");
            }
        });
    }
}