分页控件-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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >' + 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);

        }

    }