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));
            $('.pages li').mouseover(function () { document.body.style.cursor = "pointer"; }).mouseout(function () { document.body.style.cursor = "auto"; });
        });
    };

    function renderpager(pagenumber, pagecount, buttonClickCallback) {
        var $pager = $('<ul class="pages"></ul>');
        $pager.append(renderButton('首页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('上一页', pagenumber, pagecount, buttonClickCallback));
        var startPoint = 1;
        //var endPoint = pagecount < 9 ? pagecount : 9;
        var endPoint = pagecount < 7 ? pagecount : 7;
        //var thpoint = "<li class='thpoint'>...</li>";
        var thpoint = "";
        if (pagenumber > 4) {
            startPoint = pagenumber - 3;
            endPoint = pagenumber + 3;
        }
        if (endPoint > pagecount) {
            startPoint = pagecount - 6;
            endPoint = pagecount;
            thpoint = "";
        }
        if (startPoint < 1) {
            startPoint = 1;
        }
        for (var page = startPoint; page <= endPoint; page++) {
            var currentButton = $('<li class="page-number">' + (page) + '</li>');
            page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function () {
                buttonClickCallback(this.firstChild.data);
            });
            currentButton.appendTo($pager);
        }
        $pager.append(thpoint).append(renderButton('下一页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('末页', pagenumber, pagecount, buttonClickCallback));
        $pager.append("<li class='thpoint'>共: " + pagecount + " 页</li>");
        //var strgoto = $("<li class='thpoint'>当前<input type='text' value='" + pagenumber + "'maxlength='6' id='gotoval' style='width:20px; height:16px;margin-top:-3px;padding-top:2px;padding-left:10px;'/>页</li>");
        var strgoto = "";
        $pager.append(strgoto);
        //$pager.append(changepage('go', pagecount, buttonClickCallback));
        return $pager;
    }
    function changepage(buttonLabel, pagecount, buttonClickCallback) {
        var $btngoto = $('<li class="pgNext">' + buttonLabel + '</li>');
        $btngoto.click(function () {
            var gotoval = $('#gotoval').val();
            var patrn = /^[1-9]{1,20}$/;
            if (!patrn.exec(gotoval)) {
                alert("请输入非零的正整数！");
                return false;
            }
            var intval = parseInt(gotoval);
            if (intval > pagecount) {
                alert("您输入的页面超过总页数 " + pagecount);
                return;
            }
            buttonClickCallback(intval);
        });
        return $btngoto;
    }

    function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {
        var $Button = $('<li class="pgNext">' + buttonLabel + '</li>');
        var destPage = 1;
        switch (buttonLabel) {
            case "首页":
                destPage = 1;
                break;
            case "上一页":
                destPage = pagenumber - 1;
                break;
            case "下一页":
                destPage = pagenumber + 1;
                break;
            case "末页":
                destPage = pagecount;
                break;
        }
        if (buttonLabel == "首页" || buttonLabel == "上一页") {
            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);

页面调用JS

var invert = {
    pager: function (pageIndex) {

                  $("#pager").pager({
                      pagenumber: pageIndex,
                      pagecount: data.pageNum,
                      totalcount: data.totalCount,
                      buttonClickCallback: invert.pageClick
                  });

                 

              }
        
    },
    pageClick: function (pageclickednumber) {//分页回调
        var status = invert.getStatus();
        invert.pager(pageclickednumber,status);
    }
};

<div id="pager" class="w-page">

</div>

 

分页样式

/* jquery.page.js css  */
.w-page{margin:40px auto 30px;}
ul.pages {display:block;border:none;text-transform:uppercase;font-size:12px; display: inline-block; padding:0; overflow: hidden; font-size: 14px;}
ul.pages li {list-style:none;float:left;text-decoration:none;margin:0 15px 0 0;padding:6px 10px;color:#b6b6b6;background-color:#c6c6c6; color: #fff;}
ul.pages li:hover {background-color:#ff4747;}
ul.pages li.pgEmpty,li.pgNext { color:#fff; background-color:#c6c6c6; padding:6px 10px;}
ul.pages li.pgCurrent { color:#fff;font-weight:700;background:#ff4747;}
div#pager{text-align:center;}
#pager .count:hover,#pager .thpoint:hover{background-color:#c6c6c6;}
#pager .thpoint,ul.pages li.pgEmpty{cursor: default;}