JQuery 分页显示jquery-pager-1.0.js

原版是jquery-pager-1.0.js，经过变更修改加上按照项目中的一些需要修改过来。

//初始化分页控件 PagerOptions为配置参数 url为要提交的url地址，如果不需要提交则可以为null或""
//options 为提交到服务端的参数，如果不提交则传递到callback方法
//callback 方法回调，点击分页按钮时执行 callback返回总数
//如果不提交到服务端，则此callback方法为CallBack(PageIndex,PageSize,Options)
function InitPager(PagerOptions) {
    $(PagerOptions.PageId).setPager(PagerOptions);
}
function ReflashPager() {
    $("span .page_current").click();
}
(function ($) {
    //设定页码方法，初始化
    $.fn.setPager = function (PagerOptions) {
        var opts = $.extend({}, pagerDefaults, PagerOptions);
        return this.each(function () {
            $(this).empty().append(PostData(opts));
        });
    }
    //点击事件
    function PageClick(PageIndex, opts) {
        opts.PageIndex = PageIndex;
        $(opts.PageId).setPager(opts);
    }
    //跳转
    function turnTo(i, opts) {
        var index = parseInt($('#indexVal' + i).val());
        if (index == '' || index == 'undefined' || index <= 0 || index > (parseInt(opts.PageCount % parseInt(opts.PageSize)) > 0 ? parseInt(opts.PageCount / opts.PageSize) + 1 : parseInt(opts.PageCount / opts.PageSize)) || isNaN(index)) {
            $('#indexVal' + i).val('')
            return;
        }
        opts.PageIndex = index;
        $(opts.PageId).setPager(opts);
    }
    //执行post数据
    function PostData(opts) {
        if (opts.Url == null || opts.Url == "") {
            if (opts.CallBack != null && opts.CallBack != 'undefined') {
                opts.PageCount = opts.CallBack(opts.PageIndex, opts.PageSize, opts.Options);
            }
        } else {
            if (opts.IsShowLoadMovie) {
                var top = $(window).height() / 2 + $(document).scrollTop();
                var left = $(window).width() / 2 - 80 + $(document).scrollLeft();
                var html = "<div style='top:" + top + "px;left:" + left + "px;position:absolute;z-index:1000;' id='ajaxmessage'><img src='/images/loading.gif'></div>";
                $("body").append(html);
            }
            $.ajax({
                type: "POST",
                dataType: 'json',
                async: false,
                url: opts.Url + "?pageIndex=" + opts.PageIndex + "&pageSize=" + opts.PageSize,
                data: $.param(opts.Options),
                success: function (result) {
                    if (opts.CallBack != null && opts.CallBack != 'undefined') {
                        opts.PageCount = opts.CallBack(result, opts.PageIndex, opts.PageSize);
                    }
                }, error: function (msg) {
                    alertmessage("加载数据发生错误，请联系管理员检查服务端！");
                    opts.PageCount = 1;
                } 
            });
            $("#ajaxmessage").remove();
        }
        return setPagerHtml(opts);
    }
    //设定页数及html
    function setPagerHtml(opts) {
        var $content = $("<div class='pages'></div>");
        var startPageIndex = 1;
        //若页码超出
        if (opts.PageCount <= 0) opts.PageCount = 1;
        //末页
        var endPageIndex = parseInt(opts.PageCount % parseInt(opts.PageSize)) > 0 ? parseInt(opts.PageCount / opts.PageSize) + 1 : parseInt(opts.PageCount / opts.PageSize);
        if (opts.PageIndex <= 0) {
            opts.PageIndex = 1;
        }

        if (opts.IsShowNumberOnly) {
            if (endPageIndex > 1) {
                if (opts.PageIndex > endPageIndex) opts.PageIndex = endPageIndex;
                if (opts.PageIndex <= 0) opts.PageIndex = startPageIndex;
                for (var i = 1; i <= endPageIndex; i++) {

                    if (opts.PageIndex == i) {
                        $content.append($("<span >" + i + "</span>"));
                    } else {
                        $content.append(renderNumberButton(i, i, opts));
                    }
                }
            }
        } else {
            var ranNumber = Math.floor(Math.random() * 10) + "" + Math.floor(Math.random() * 10);
            if (opts.IsShowPage != false) {
                $content.append($("<span >当前" + opts.PageIndex + " / " + endPageIndex + "页</span>"));
            }
            $content.append($("<span >共" + opts.PageCount + "条数据</span>"));
            if (opts.PageIndex > endPageIndex) opts.PageIndex = endPageIndex;
            if (opts.PageIndex <= 0) opts.PageIndex = startPageIndex;
            var nextPageIndex = opts.PageIndex + 1;
            var prevPageIndex = opts.PageIndex - 1;
            if (opts.PageIndex == startPageIndex) {
                $content.append($("<span class='first'>首 页</span>"));
                $content.append($("<span class='first'>上一页</span>"));
            } else {
                $content.append(renderTopButton(1, "首 页", opts));
                $content.append(renderTopButton(prevPageIndex, "上一页", opts));
            }
            //这里判断是否显示页码
            if (opts.ShowPageNumber) {
                //页码部分隐藏 只显示中间区域
                if (endPageIndex <= 5 && opts.PageIndex <= 5) {
                    for (var i = 1; i <= endPageIndex; i++) {
                        if (i == opts.PageIndex) {
                            $content.append($("<span class='current'>" + i + "</span>"));
                        } else {
                            $content.append(renderButton(i, i, opts));
                        }
                    }
                } else if (endPageIndex > 5 && endPageIndex - opts.PageIndex <= 2) {
                    $content.append($("<span class='dotted'>...</span>"));
                    for (var i = endPageIndex - 4; i <= endPageIndex; i++) {
                        if (i == opts.PageIndex) {
                            $content.append($("<span class='current'>" + i + "</span>"));
                        } else {
                            $content.append(renderButton(i, i, opts));
                        }
                    }
                } else if (endPageIndex > 5 && opts.PageIndex > 3) {
                    $content.append($("<span class='dotted'>...</span>"));
                    for (var i = opts.PageIndex - 2; i <= opts.PageIndex + 2; i++) {
                        if (i == opts.PageIndex) {
                            $content.append($("<span class='current'>" + i + "</span>"));
                        } else {
                            $content.append(renderButton(i, i, opts));
                        }
                    }
                    $content.append($("<span class='dotted'>...</span>"));
                } else if (endPageIndex > 5 && opts.PageIndex <= 3) {
                    for (var i = 1; i <= 5; i++) {
                        if (i == opts.PageIndex) {
                            $content.append($("<span class='current'>" + i + "</span>"));
                        } else {
                            $content.append(renderButton(i, i, opts));
                        }
                    }
                    $content.append($("<span class='dotted'>...</span>"));
                }
            }
            if (opts.PageIndex == endPageIndex) {
                $content.append($("<span class='last'>下一页</span>"));
                $content.append($("<span class='last'>末 页</span>"));
            } else {
                $content.append(renderButton(nextPageIndex, "下一页", opts));
                $content.append(renderButton(endPageIndex, "末 页", opts));
            }

            if (opts.IsShowTurnTo) {
                $content.append($("<span>跳转至第<input type='text' id='indexVal" + ranNumber + "' />页</span>"));
                $content.append(renderTurnToButton(ranNumber, opts));
            }
            $content.append(renderReflash(opts.PageIndex,opts));
        }
        $content.append($("<div style='clear:both;'></div>"));
        return $content;
    }
    function renderTurnToButton(i, opts) {
        var $turnto = $("<span><a title='跳转' class='btn40x20' >跳转 </a></span>");
        $turnto.click(function () {
            turnTo(i, opts);
        });
        return $turnto;
    }
    function renderReflash(goPageIndex,opts)
    {
        var $turnto = $("<span style='display:none;'><a title='刷新'  class='page_current'>刷新</a></span>");
        $turnto.click(function () {
            PageClick(goPageIndex, opts);
        });
        return $turnto;
    }
    function renderTopButton(goPageIndex, text, opts) {
        var $goto = $("<span class='prev' title='第" + goPageIndex + "页'  >" + text + "</span>'");
        $goto.click(function () {
            PageClick(goPageIndex, opts);
        });
        return $goto;
    }
    function renderButton(goPageIndex, text, opts) {
        var $goto = $("<span class='p_next' title='第" + goPageIndex + "页' >" + text + "</span>'");
        $goto.click(function () {
            PageClick(goPageIndex, opts);
        });
        return $goto;
    }

    function renderNumberButton(goPageIndex, text, opts) {
        var $goto = $("<span  title='第" + goPageIndex + "页' style='cursor: pointer;' class='current' >" + text + "</span>'");
        $goto.click(function () {
            PageClick(goPageIndex, opts);
        });
        return $goto;
    }
    //初始化参数
    var pagerDefaults = {
        PageCount: 1, //总行数
        PageIndex: 1, //当前页数
        PageSize: 20, //每页显示行数
        ShowPageNumber: false, //显示页码
        IsShowPage: true, //显示当前 1/1页
        IsShowTurnTo: true, //显示跳转
        IsShowNumberOnly: false, //只显示页码
        IsShowLoadMovie: false,
        PageId: "#pageing", //要显示页码的地方
        Url: "", //要post数据的地方
        Options: {}, //要post到服务端的参数
        CallBack: function () { return 1; } //回调函数，可在此处执行数据绑定，一定要返回行总数
    }
})(jQuery);

支持查询数据后，更改查询条件不影响现在的分页条件。支持界面刷新，支持自定义查询参数。支持查询出错报错功能，支持不与服务器交互呈现分页。

调用方法：

InitPager({
                PageId: "#paging",
                Url: "/ashx/teacherHandler.ashx",
                Options: { swType: "GetDataList", agentId: "-1", orgId: "-1", schoolId: schGuid, departId: depGuid, name: name, phone: phone, s: s, card: card, cardNo: cardNo },
                CallBack: function (result) {
                    $('#tbody').html('');
                    $("#demo").tmpl(result.Rows).appendTo("#tbody");

                    //要返回总数，这里的result包括当前页数，每页显示行数
                    return result.Total;
                }
            });    

可以自定义查询页数和每页显示条数。

下面是用到的样式文件：

/*--
.pageinfo{ float:left; height:auto; auto;}
.pages { float: right; height: 30px; overflow: hidden; font-family: Arial,SimSun; }
.pages li { display:inline-block; margin-right:10px;height:30px;}
.pages .dotted {  font-weight: bold; }
.pages .beginEnd {  height: 28px;border:1px solid #ccc;color:#0063DC;
    line-height: 28px;}
.pages A { color:#0063DC; }
.pages span { cursor: pointer;height: 28px;color:#0063DC;
    min- 40px;
    overflow: hidden;
    padding:3px 5px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap; background:#fff; }
.prev{ background: url(../../Img/login/prompt.png) no-repeat 0 -180px;
    height: 23px; line-height: 23px; padding-top: 1px; }
.pages span:hover { border:1px solid #ff6600;;line-height: 28px; background:#FFEEE5; color: #ff6600;; }
.pages A {  text-decoration: none; }
.pages A:visited { color: #ff6600;; }
.pages A:hover { background: #1f3a87;  }
.pages .current { background: #1f3a87;  }
.pages .current {  font-weight: bold; }
.pages SPAN { color: #ccc; }  --*/

.pager{ margin-top:10px; margin-bottom:10px;height:20px;}
.pages { float: right; height: 30px; overflow: hidden; font-size:12px; overflow:hidden; }
.pages span { 
    overflow: hidden;
    text-align: center; margin:0 5px; line-height:15px;
    }
.pages .current{  background-color: #FFEEE5;border: 1px solid #357B1C;color: #357B1C;; font-weight: 700; }
.pages input{ width:22px; border:1px solid #ccc; vertical-align: middle; text-align:left; color:#000; font-family:Arial;
              margin:0 5px; height:14px; padding:3px; font-size:12px; font-family:Arial;}
.pages .first,.pages .prev,.pages .p_next,.pages .last{ background: url(/skin/skin1/Img/prompt.gif) no-repeat; cursor: pointer;color:#357B1C;border:1px solid #ccc; height:15px;
               vertical-align: middle; white-space: nowrap;overflow:hidden; display:inline-block;  }
.pages .first{ background-position:0 -497px; color:#000; padding:3px 5px 3px 15px; *padding:6px 5px 1px 15px;*background-position:0 -496px; /*IE6*/  }
.pages .prev{ background-position:0 -417px; color:#357B1C;; padding:3px 5px 3px 15px;*padding:6px 5px 1px 15px; *background-position:0 -416px;/*IE6*/}
.pages .prev:hover{border:1px solid #357B1C;; color: #357B1C;; padding:3px 5px 3px 15px;*padding:6px 5px 1px 15px;}
.pages .p_next{background-position:right -456px; color:#357B1C;; padding:3px 15px 3px 5px;*padding:6px 15px 1px 5px; *background-position:right -455px;/*IE6*/}
.pages .p_next:hover{border:1px solid #357B1C;; color: #357B1C;; padding:3px 15px 3px 5px;*padding:6px 15px 1px 5px;}
.pages .last{background-position:right -536px; color:#000; padding:3px 15px 3px 5px; *padding:6px 15px 1px 5px;*background-position:right -535px;/*IE6*/}
.btn40x20{width:40px; height:20px;
    color:#357B1C; 
    cursor:pointer; 
    vertical-align:middle;
    text-align:center; 
    overflow:hidden; 
    padding:0; 
    border:1px solid #cccccc;
    color:#000; font:12px/20px Tahoma, "宋体", sans-serif; display:inline-block;}