[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 输入框,默认值为select goText: '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; }//修正startPage endPage = arg.currentPage + nextAdd; if (endPage - startPage < arg.showPageRange) { endPage = startPage + arg.showPageRange - 1; }//根据startPage修正endPage if (endPage > totalPages - 1) { endPage = totalPages - 1; startPage = endPage - arg.showPageRange + 1; }//修正endPage,并同步修正startPage if (startPage < 3) {//再次修正startPage startPage = 2; } if (endPage > totalPages - 1) {//再次修正endPage endPage = 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"); }); });最后来张截图,样式丑了点
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。