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; width: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-width: 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:; }
 .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:;
     border:1px solid #cccccc;
     color:#000; font:12px/20px Tahoma, "宋体", sans-serif; display:inline-block;}