JQuery 分页显示jquery-pager-1.0.js
原版是jquery-pager-1.0.js，经过变更修改加上按照项目中的一些需要修改过来。
1 //初始化分页控件 PagerOptions为配置参数 url为要提交的url地址，如果不需要提交则可以为null或"" 2 //options 为提交到服务端的参数，如果不提交则传递到callback方法 3 //callback 方法回调，点击分页按钮时执行 callback返回总数 4 //如果不提交到服务端，则此callback方法为CallBack(PageIndex,PageSize,Options) 5 function InitPager(PagerOptions) { 6 $(PagerOptions.PageId).setPager(PagerOptions); 7 } 8 function ReflashPager() { 9 $("span .page_current").click(); 10 } 11 (function ($) { 12 //设定页码方法，初始化 13 $.fn.setPager = function (PagerOptions) { 14 var opts = $.extend({}, pagerDefaults, PagerOptions); 15 return this.each(function () { 16 $(this).empty().append(PostData(opts)); 17 }); 18 } 19 //点击事件 20 function PageClick(PageIndex, opts) { 21 opts.PageIndex = PageIndex; 22 $(opts.PageId).setPager(opts); 23 } 24 //跳转 25 function turnTo(i, opts) { 26 var index = parseInt($('#indexVal' + i).val()); 27 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)) { 28 $('#indexVal' + i).val('') 29 return; 30 } 31 opts.PageIndex = index; 32 $(opts.PageId).setPager(opts); 33 } 34 //执行post数据 35 function PostData(opts) { 36 if (opts.Url == null || opts.Url == "") { 37 if (opts.CallBack != null && opts.CallBack != 'undefined') { 38 opts.PageCount = opts.CallBack(opts.PageIndex, opts.PageSize, opts.Options); 39 } 40 } else { 41 if (opts.IsShowLoadMovie) { 42 var top = $(window).height() / 2 + $(document).scrollTop(); 43 var left = $(window).width() / 2 - 80 + $(document).scrollLeft(); 44 var html = "<div style='top:" + top + "px;left:" + left + "px;position:absolute;z-index:1000;' id='ajaxmessage'><img src='/images/loading.gif'></div>"; 45 $("body").append(html); 46 } 47 $.ajax({ 48 type: "POST", 49 dataType: 'json', 50 async: false, 51 url: opts.Url + "?pageIndex=" + opts.PageIndex + "&pageSize=" + opts.PageSize, 52 data: $.param(opts.Options), 53 success: function (result) { 54 if (opts.CallBack != null && opts.CallBack != 'undefined') { 55 opts.PageCount = opts.CallBack(result, opts.PageIndex, opts.PageSize); 56 } 57 }, error: function (msg) { 58 alertmessage("加载数据发生错误，请联系管理员检查服务端！"); 59 opts.PageCount = 1; 60 } 61 }); 62 $("#ajaxmessage").remove(); 63 } 64 return setPagerHtml(opts); 65 } 66 //设定页数及html 67 function setPagerHtml(opts) { 68 var $content = $("<div class='pages'></div>"); 69 var startPageIndex = 1; 70 //若页码超出 71 if (opts.PageCount <= 0) opts.PageCount = 1; 72 //末页 73 var endPageIndex = parseInt(opts.PageCount % parseInt(opts.PageSize)) > 0 ? parseInt(opts.PageCount / opts.PageSize) + 1 : parseInt(opts.PageCount / opts.PageSize); 74 if (opts.PageIndex <= 0) { 75 opts.PageIndex = 1; 76 } 77 78 if (opts.IsShowNumberOnly) { 79 if (endPageIndex > 1) { 80 if (opts.PageIndex > endPageIndex) opts.PageIndex = endPageIndex; 81 if (opts.PageIndex <= 0) opts.PageIndex = startPageIndex; 82 for (var i = 1; i <= endPageIndex; i++) { 83 84 if (opts.PageIndex == i) { 85 $content.append($("<span >" + i + "</span>")); 86 } else { 87 $content.append(renderNumberButton(i, i, opts)); 88 } 89 } 90 } 91 } else { 92 var ranNumber = Math.floor(Math.random() * 10) + "" + Math.floor(Math.random() * 10); 93 if (opts.IsShowPage != false) { 94 $content.append($("<span >当前" + opts.PageIndex + " / " + endPageIndex + "页</span>")); 95 } 96 $content.append($("<span >共" + opts.PageCount + "条数据</span>")); 97 if (opts.PageIndex > endPageIndex) opts.PageIndex = endPageIndex; 98 if (opts.PageIndex <= 0) opts.PageIndex = startPageIndex; 99 var nextPageIndex = opts.PageIndex + 1; 100 var prevPageIndex = opts.PageIndex - 1; 101 if (opts.PageIndex == startPageIndex) { 102 $content.append($("<span class='first'>首 页</span>")); 103 $content.append($("<span class='first'>上一页</span>")); 104 } else { 105 $content.append(renderTopButton(1, "首 页", opts)); 106 $content.append(renderTopButton(prevPageIndex, "上一页", opts)); 107 } 108 //这里判断是否显示页码 109 if (opts.ShowPageNumber) { 110 //页码部分隐藏 只显示中间区域 111 if (endPageIndex <= 5 && opts.PageIndex <= 5) { 112 for (var i = 1; i <= endPageIndex; i++) { 113 if (i == opts.PageIndex) { 114 $content.append($("<span class='current'>" + i + "</span>")); 115 } else { 116 $content.append(renderButton(i, i, opts)); 117 } 118 } 119 } else if (endPageIndex > 5 && endPageIndex - opts.PageIndex <= 2) { 120 $content.append($("<span class='dotted'>...</span>")); 121 for (var i = endPageIndex - 4; i <= endPageIndex; i++) { 122 if (i == opts.PageIndex) { 123 $content.append($("<span class='current'>" + i + "</span>")); 124 } else { 125 $content.append(renderButton(i, i, opts)); 126 } 127 } 128 } else if (endPageIndex > 5 && opts.PageIndex > 3) { 129 $content.append($("<span class='dotted'>...</span>")); 130 for (var i = opts.PageIndex - 2; i <= opts.PageIndex + 2; i++) { 131 if (i == opts.PageIndex) { 132 $content.append($("<span class='current'>" + i + "</span>")); 133 } else { 134 $content.append(renderButton(i, i, opts)); 135 } 136 } 137 $content.append($("<span class='dotted'>...</span>")); 138 } else if (endPageIndex > 5 && opts.PageIndex <= 3) { 139 for (var i = 1; i <= 5; i++) { 140 if (i == opts.PageIndex) { 141 $content.append($("<span class='current'>" + i + "</span>")); 142 } else { 143 $content.append(renderButton(i, i, opts)); 144 } 145 } 146 $content.append($("<span class='dotted'>...</span>")); 147 } 148 } 149 if (opts.PageIndex == endPageIndex) { 150 $content.append($("<span class='last'>下一页</span>")); 151 $content.append($("<span class='last'>末 页</span>")); 152 } else { 153 $content.append(renderButton(nextPageIndex, "下一页", opts)); 154 $content.append(renderButton(endPageIndex, "末 页", opts)); 155 } 156 157 if (opts.IsShowTurnTo) { 158 $content.append($("<span>跳转至第<input type='text' id='indexVal" + ranNumber + "' />页</span>")); 159 $content.append(renderTurnToButton(ranNumber, opts)); 160 } 161 $content.append(renderReflash(opts.PageIndex,opts)); 162 } 163 $content.append($("<div style='clear:both;'></div>")); 164 return $content; 165 } 166 function renderTurnToButton(i, opts) { 167 var $turnto = $("<span><a title='跳转' class='btn40x20' >跳转 </a></span>"); 168 $turnto.click(function () { 169 turnTo(i, opts); 170 }); 171 return $turnto; 172 } 173 function renderReflash(goPageIndex,opts) 174 { 175 var $turnto = $("<span style='display:none;'><a title='刷新' class='page_current'>刷新</a></span>"); 176 $turnto.click(function () { 177 PageClick(goPageIndex, opts); 178 }); 179 return $turnto; 180 } 181 function renderTopButton(goPageIndex, text, opts) { 182 var $goto = $("<span class='prev' title='第" + goPageIndex + "页' >" + text + "</span>'"); 183 $goto.click(function () { 184 PageClick(goPageIndex, opts); 185 }); 186 return $goto; 187 } 188 function renderButton(goPageIndex, text, opts) { 189 var $goto = $("<span class='p_next' title='第" + goPageIndex + "页' >" + text + "</span>'"); 190 $goto.click(function () { 191 PageClick(goPageIndex, opts); 192 }); 193 return $goto; 194 } 195 196 function renderNumberButton(goPageIndex, text, opts) { 197 var $goto = $("<span title='第" + goPageIndex + "页' style='cursor: pointer;' class='current' >" + text + "</span>'"); 198 $goto.click(function () { 199 PageClick(goPageIndex, opts); 200 }); 201 return $goto; 202 } 203 //初始化参数 204 var pagerDefaults = { 205 PageCount: 1, //总行数 206 PageIndex: 1, //当前页数 207 PageSize: 20, //每页显示行数 208 ShowPageNumber: false, //显示页码 209 IsShowPage: true, //显示当前 1/1页 210 IsShowTurnTo: true, //显示跳转 211 IsShowNumberOnly: false, //只显示页码 212 IsShowLoadMovie: false, 213 PageId: "#pageing", //要显示页码的地方 214 Url: "", //要post数据的地方 215 Options: {}, //要post到服务端的参数 216 CallBack: function () { return 1; } //回调函数，可在此处执行数据绑定，一定要返回行总数 217 } 218 })(jQuery);
支持查询数据后，更改查询条件不影响现在的分页条件。支持界面刷新，支持自定义查询参数。支持查询出错报错功能，支持不与服务器交互呈现分页。
调用方法：
1 InitPager({ 2 PageId: "#paging", 3 Url: "/ashx/teacherHandler.ashx", 4 Options: { swType: "GetDataList", agentId: "-1", orgId: "-1", schoolId: schGuid, departId: depGuid, name: name, phone: phone, s: s, card: card, cardNo: cardNo }, 5 CallBack: function (result) { 6 $('#tbody').html(''); 7 $("#demo").tmpl(result.Rows).appendTo("#tbody"); 8 9 //要返回总数，这里的result包括当前页数，每页显示行数 10 return result.Total; 11 } 12 });
可以自定义查询页数和每页显示条数。
下面是用到的样式文件：
1 /*-- 2 .pageinfo{ float:left; height:auto; width:auto;} 3 .pages { float: right; height: 30px; overflow: hidden; font-family: Arial,SimSun; } 4 .pages li { display:inline-block; margin-right:10px;height:30px;} 5 .pages .dotted { font-weight: bold; } 6 .pages .beginEnd { height: 28px;border:1px solid #ccc;color:#0063DC; 7 line-height: 28px;} 8 .pages A { color:#0063DC; } 9 .pages span { cursor: pointer;height: 28px;color:#0063DC; 10 min-width: 40px; 11 overflow: hidden; 12 padding:3px 5px; 13 text-align: center; 14 vertical-align: middle; 15 white-space: nowrap; background:#fff; } 16 .prev{ background: url(../../Img/login/prompt.png) no-repeat 0 -180px; 17 height: 23px; line-height: 23px; padding-top: 1px; } 18 .pages span:hover { border:1px solid #ff6600;;line-height: 28px; background:#FFEEE5; color: #ff6600;; } 19 .pages A { text-decoration: none; } 20 .pages A:visited { color: #ff6600;; } 21 .pages A:hover { background: #1f3a87; } 22 .pages .current { background: #1f3a87; } 23 .pages .current { font-weight: bold; } 24 .pages SPAN { color: #ccc; } --*/ 25 26 .pager{ margin-top:10px; margin-bottom:10px;height:20px;} 27 .pages { float: right; height: 30px; overflow: hidden; font-size:12px; overflow:hidden; } 28 .pages span { 29 overflow: hidden; 30 text-align: center; margin:0 5px; line-height:15px; 31 } 32 .pages .current{ background-color: #FFEEE5;border: 1px solid #357B1C;color: #357B1C;; font-weight: 700; } 33 .pages input{ width:22px; border:1px solid #ccc; vertical-align: middle; text-align:left; color:#000; font-family:Arial; 34 margin:0 5px; height:14px; padding:3px; font-size:12px; font-family:Arial;} 35 .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; 36 vertical-align: middle; white-space: nowrap;overflow:hidden; display:inline-block; } 37 .pages .first{ background-position:0 -497px; color:#000; padding:3px 5px 3px 15px; *padding:6px 5px 1px 15px;*background-position:0 -496px; /*IE6*/ } 38 .pages .prev{ background-position:0 -417px; color:#357B1C;; padding:3px 5px 3px 15px;*padding:6px 5px 1px 15px; *background-position:0 -416px;/*IE6*/} 39 .pages .prev:hover{border:1px solid #357B1C;; color: #357B1C;; padding:3px 5px 3px 15px;*padding:6px 5px 1px 15px;} 40 .pages .p_next{background-position:right -456px; color:#357B1C;; padding:3px 15px 3px 5px;*padding:6px 15px 1px 5px; *background-position:right -455px;/*IE6*/} 41 .pages .p_next:hover{border:1px solid #357B1C;; color: #357B1C;; padding:3px 15px 3px 5px;*padding:6px 15px 1px 5px;} 42 .pages .last{background-position:right -536px; color:#000; padding:3px 15px 3px 5px; *padding:6px 15px 1px 5px;*background-position:right -535px;/*IE6*/} 43 .btn40x20{width:40px; height:20px; 44 color:#357B1C; 45 cursor:pointer; 46 vertical-align:middle; 47 text-align:center; 48 overflow:hidden; 49 padding:0; 50 border:1px solid #cccccc; 51 color:#000; font:12px/20px Tahoma, "宋体", sans-serif; display:inline-block;}