分页控件-Jquery-MVC

1：JS文件：
(function ($) {
    $.fn.pager = function (options) {
        var opts = $.extend({}, $.fn.pager.defaults, options);
        return this.each(function () {
            $(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));
            $("#btnpagerTo").keydown(function (event) {
                if (event.keyCode == 13) {
                    var tempval = $(this).val();
                    if ((parseInt(tempval) <= parseInt(options.pagecount)) && parseInt(tempval) !=0) {
                        options.buttonClickCallback(tempval);
                    }
                }
            });
        });
    };
    function renderpager(pagenumber, pagecount, buttonClickCallback) {
        var $pager = $('<div class="Samplepages"></div>');
        if (pagenumber == 1) {
            $pager.append("<label>首º¡Á页°3</label>").append("<label>上¦?一°?页°3</label>");
        }
        else {
            $pager.append(renderButton('首º¡Á页°3', pagenumber, pagecount, buttonClickCallback))
        .append(renderButton('上¦?一°?页°3', pagenumber, pagecount, buttonClickCallback));
        }
        var startPoint = 1;
        var endPoint = 9;
        if (pagenumber > 4) {
            startPoint = pagenumber - 4;
            endPoint = pagenumber + 4;
        }
        if (endPoint > pagecount) {
            startPoint = pagecount - 8;
            endPoint = pagecount;
        }
        if (startPoint < 1) {
            startPoint = 1;
        }
        for (var page = startPoint; page <= endPoint; page++) {
            var currentButton = $('<label class="page-number">' + (page) + '</label>');
            page == pagenumber ? (currentButton = $('<label class="page-number">' + (page) + '</label>')) : currentButton = $('<a href="#" class="page-number">' + (page) + '</a>');
            page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function () { buttonClickCallback(this.firstChild.data); });
            currentButton.appendTo($pager);
        }
        if (pagecount == pagenumber || (pagecount == 0 && pagenumber == 1)) {
            $pager.append("<label>下?一°?页°3</label>");
        }
        else {
            $pager.append(renderButton('下?一°?页°3', pagenumber, pagecount, buttonClickCallback));
        }
        $pager.append("<label>共2" + pagecount + "页°3</label>")
        .append("<label>到Ì?第̨²</label><input type='text' id='btnpagerTo' style='width:25px;' /><label>页°3</label>");
        if (pagecount == pagenumber || (pagecount == 0 && pagenumber == 1)) {
            $pager.append("<label>末?页°3</label>");
        }
        else {
            $pager.append(renderButton('末?页°3', pagenumber, pagecount, buttonClickCallback));
        }
        return $pager;
    }
    function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {
        var $Button = $('<a href="#">' + buttonLabel + '</a>');
        var $curBtn = $("<label>" + buttonLabel + "</label>");
        var destPage = 1;
        switch (buttonLabel) {
            case "首º¡Á页°3":
                destPage = 1;
                break;
            case "上¦?一°?页°3":
                destPage = pagenumber - 1;
                break;
            case "下?一°?页°3":
                destPage = pagenumber + 1;
                break;
            case "末?页°3":
                destPage = pagecount;
                break;
        }
        if (buttonLabel == "首º¡Á页°3" || buttonLabel == "上¦?一°?页°3") {
            pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function () { buttonClickCallback(destPage); });
        }
        else {
            pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function () { buttonClickCallback(destPage); });
        }
        return $Button;
    }
    $.fn.pager.defaults = {
        pagenumber: 1,
        pagecount: 1
    };
})(jQuery);


2：简单CSS：（可配）
.Samplepages a, .Samplepages label
{
    margin: 0 3px;
}
.Samplepages a
{
    border:1px solid #003f7e;
    padding:1px 3px 1px 3px;
}
.pgCurrent
{
    background-color: Yellow;
}

3:html:
<div id="pager" style="margin: 0px auto; width: 600px; float: right;">
</div>


4：页面配置：
    PageClick = function (pageclickednumber, pageTotal) {
        callServe(pageclickednumber);
        $("#pager").pager({ pagenumber: pageclickednumber, pagecount: pageTotal, buttonClickCallback: PageClick });
    }


  function sucessFun(data) {
        try {
            var rtndata = data.data;
            $("#contentTable tr:gt(0)").remove();
            for (var i = 0; i < rtndata.length; i++) {
                var tmpTr = "<tr><td><input type='checkbox' value='" + rtndata[i].SKU + "' /> </td><td>" + rtndata[i].SKU + "</td><td>"
                    + rtndata[i].ProductCode + "</td> <td>" + rtndata[i].Name + "</td> <td>" + rtndata[i].Color + " </td> <td>" + rtndata[i].Size
                    + "</td> <td>" + rtndata[i].CategoryName + "</td> <td>" + rtndata[i].PhotoTeamGroupName + "</td><td>"
                    + rtndata[i].PhotoStatus + "</td><td>" + rtndata[i].AllocateTaskTime + "</td></tr>";
                $("#contentTable").append(tmpTr);
            }

            $("#pager").pager({ pagenumber: data.currentPage, pagecount: data.totalPage, buttonClickCallback: PageClick });
        }
        catch (e) {
            $("#pager").pager({ pagenumber: 1, pagecount: 0, buttonClickCallback: PageClick });
            alert(data);
        }
    }