[JQuery]分页插件PageList

虽然已经有了[JQuery]分页插件jQuery pager plugin功能扩展，可惜蛋疼的UI不一样，只能重做一个，唉

基本上与pager类似，只不过跳转方式有所变化，以下是具体的js，其中defaultSettings为相关参数设定，其中要注意的是renderPerCall，这个参数如果设为false，将不执行html重绘 $.fn.pageList = function (arg, methodName) {if (typeof methodName === "string" && $.trim(methodName) != "") {switch (methodName) {case 'refresh'://刷新当前页,一般用于删除或者更新后$(this).each(function () {var arg = $(this).data('pageListArg');if (arg != null && typeof arg.clickCallback === "function") {arg.clickCallback(arg.currentPage);}});break;}}else {var defaultSettings = {prevText: 'Prev',//显示的前一页文本nextText: 'Next',//显示的下一页文本showGoLink: 'auto',//是否显示快速跳转，可能的值为auto 自动判断；true 永远显示；false 永不显示goInputType: 'select',//如何显示快速跳转输入，可能的值为select 下拉列表；text 输入框，默认值为selectgoText: 'Go',//显示的快速跳转文本recordText: '',//显示记录数，为空时不显示，否则按照占位符显示文本，{0}表示总页数，{1}表示总记录数clickCallback: function (currentPage) { },//链接被点击时触发的事件，currentPage表示当前点击的是第几页，索引从1开始renderPerCall: true,//是否每次点击都重新绘制，如果每次clickCallback事件中都会重新绘制pageList，此处请设置为false减少绘制消耗pageSize: 10,//每页显示的数据条数currentPage: 1,//当前第几页，索引从1开始totalCount: 0,//总记录数showPageRange: 5//去除第一页，最后一页后，还需显示的页面数量};arg = $.extend({}, defaultSettings, arg);var totalPages = ~~(arg.totalCount / arg.pageSize) + (~~(arg.totalCount % arg.pageSize) == 0 ? 0 : 1);//获取总页数if (arg.currentPage < 1) {//修正当前页页码为第一页arg.currentPage = 1;}if (arg.currentPage > totalPages) {//修正当前页页码为最后一页arg.currentPage = totalPages;}$(this).data('pageListArg', arg);$(this).each(function () {$(this).empty();//无数据if (totalPages > 0) {var ul = $('<ul class="pager"></ul>');var startPage = 2, endPage = totalPages – 1;//排除首页最后一页后显示的第一个超链接，最后一个超链接var prevS = false, nextS = false;//是否需要显示…对应的超链接if (arg.showPageRange + 4 < totalPages) {var prevReduce = ~~(arg.showPageRange / 2);var nextAdd = prevReduce;if (~~(arg.showPageRange % 2) == 0) {prevReduce–;//showPageRange为偶数时，，currentPage前面显示的页码链接数比后面显示的链接数少一个}if (prevReduce < 0) {//修正当showPageRange被设置为1导致的负数prevReduce = 0;}startPage = arg.currentPage – prevReduce;if (startPage < 2) { startPage = 2; }//修正startPageendPage = arg.currentPage + nextAdd;if (endPage – startPage < arg.showPageRange) { endPage = startPage + arg.showPageRange – 1; }//根据startPage修正endPageif (endPage > totalPages – 1) { endPage = totalPages – 1; startPage = endPage – arg.showPageRange + 1; }//修正endPage,并同步修正startPageif (startPage < 3) {//再次修正startPagestartPage = 2;}if (endPage > totalPages – 1) {//再次修正endPageendPage = totalPages – 1;}prevS = startPage – 1 > 1;nextS = endPage + 1 < totalPages;}var li = renderDoms(arg.prevText, arg.currentPage == 1, false, arg.currentPage – 1, arg);//前一页li.addClass("prev");ul.append(li);ul.append(renderDoms("1", arg.currentPage == 1, arg.currentPage == 1, 1, arg));//第一页if (prevS) {ul.append(renderDoms('…', false, false, startPage – 1, arg));//…页}for (var i = startPage; i <= endPage; i++) {ul.append(renderDoms(i, arg.currentPage == i, arg.currentPage == i, i, arg));//第i页}if (nextS) {ul.append(renderDoms('…', false, false, endPage + 1, arg));//…页}if (totalPages > 1) {ul.append(renderDoms(totalPages, arg.currentPage == totalPages, arg.currentPage == totalPages, totalPages, arg));//最后一页}li = renderDoms(arg.nextText, arg.currentPage == totalPages, false, arg.currentPage + 1, arg);//下一页li.addClass("next");ul.append(li);var showGo;switch ((arg.showGo + '').toLowerCase()) {case "true":showGo = true;break;case "false":showGo = false;break;default:showGo = arg.showPageRange + 4 < totalPages;break;}if (showGo) {li = $('<li class="text"><span class="go">' + arg.goText + '</span></li>');var sel;if (arg.goInputType.toLowerCase() != 'text') {sel = $('<select class="go"></select>');//<input tyle="text" class="go" />for (var i = 1; i <= totalPages; i++) {sel.append('<option value="' + i + '">' + i + '</option>');}sel.val(arg.currentPage);}else {sel = $('<input tyle="text" class="go" />');sel.focus(function () {$(this).val('');}).change(function () {var num = parseInt($(this).val());if (num && num > 0) {if (num > totalPages) {num = totalPages;}$(this).val(num);}else {$(this).val('');}}).keyup(function () { $(this).change(); });}var sp = li.find('span');sel.insertBefore(sp);sp.click(function () {var pageNumber = ~~$(this).parent().find('.go:eq(0)').val();if (pageNumber > 0) {clickEvent($(this).parent(), arg, pageNumber);}});ul.append(li);}if (typeof arg.recordText === "string" && $.trim(arg.recordText) != "") {ul.append('<li class="text">' + arg.recordText.replace(/\{0\}/g, totalPages).replace(/\{1\}/g, arg.totalCount) + '</li>');}$(this).append(ul);}});}function renderDoms(text, disable, active, pageNumber, arg) {var li = $('<li><a style="cursor:' + (disable ? "" : "pointer") + ';">' + text + '</a></li>');if (active) {li.addClass("active");}if (disable) {li.addClass("disable");}else {li.click(function () {clickEvent(this, arg, pageNumber);});}return li;}function clickEvent(dom, arg, pageNumber) {if (typeof arg.clickCallback === "function") {arg.clickCallback(pageNumber);}if (arg.renderPerCall) {arg.currentPage = pageNumber;$(dom).parent().parent().pageList(arg);}}};相应的css如下：.pager-list {float: right;position: relative;font-size: 10pt;}.pager-list > .pager {display: block;position: relative;}.pager-list ul li {list-style: none;float: left;margin: 0 3px;min-width: 37px;}.pager-list ul li.next,.pager-list ul li.prev {width: auto;}.pager-list ul li.disable a {color: #848c94;}.pager-list ul li.text {display: block;height: 30px;line-height: 30px;text-align: center;border: 0px;color: black;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;}.pager-list ul li.text input.go {width: 25px;}.pager-list ul li.text select.go {padding:2px 2px;}.pager-list ul li.text span.go {color: #848c94;margin-left: 2px;cursor: pointer;background-color: silver;padding: 4px;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;}.pager-list ul li a {display: block;/*width: 24px;*/padding: 0 7px;height: 26px;line-height: 26px;text-align: center;border: 1px solid #848c94;color: black;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;}.pager-list ul li a:hover,.pager-list ul li.active a {background-color: #b2d1d8;}测试用的Html如下： <div class="pager-list"></div><div style="clear: both;"></div><div class="pager-list"></div><div style="clear: both;"></div><div class="pager-list"></div><div style="clear: both;"></div><div class="pager-list"></div><div style="clear: both;"></div><div class="pager-list"></div><div style="clear: both;"></div><div class="pager-list"></div><div style="clear: both;"></div><input type="button" id="btn_Refresh" value="Refresh" />测试对应的js代码如下：$().ready(function () {$('div.pager-list').pageList({prevText: '前一页',nextText: '下一页',recordText: '共{0}页，{1}条记录',totalCount: 405,goInputType: 'text',//showGoLink: true,showPageRange: 5,renderPerCall: true,clickCallback: function (currentPage) {console.info("currentPage:" + currentPage);}});$('#btn_Refresh').click(function () {$('div.pager-list').pageList(null, "refresh");});});最后来张截图，样式丑了点

别人失去了信心，他却下决心实现自己的目标。