if (window.jQuery && !window.jQuery.paging) { (function (jQuery) { var PagingUtil = { _calculateRemainder: function(num1, num2) { var numReturn; if ((num1 % num2) > 0) numReturn = parseInt(num1 / num2) + 1; else numReturn = parseInt(num1 / num2); return numReturn; }, _defaultPagingRender: function (result) { var setting = result.setting; var isHavePreGroup = result.isHavePreGroup; var isHaveNextGroup = result.isHaveNextGroup; var curPageIndex = result.curPageIndex; var startPage = result.startPage; var endPage = result.endPage; var gotoPageFunc = setting.gotoPageFunc; var pagingRenderTo = setting.pagingRenderTo; var setLinkCss = function (href, isCurPage) { if (!isCurPage && setting.pageLinkCss) { href.css(setting.pageLinkCss); } if (isCurPage && setting.curPageLinkCss) { href.css(setting.curPageLinkCss); } } var pagingSpan = $('<span/>'); if (setting.pagingContainerCss) pagingSpan.css(setting.pagingContainerCss); if (isHavePreGroup) { var prewGroupLinkText = (setting.prewGroupLinkText) ? setting.prewGroupLinkText : '[...]'; var href = $('<a href="#" mce_href="#" >' + prewGroupLinkText + '</a>').click(function () { gotoPageFunc(result.prewGroupLastPage, result); result.setting.curPageIndex = result.prewGroupLastPage; PagingUtil.display(result.setting); return false; }); setLinkCss(href, false); pagingSpan.append($('<span/>').append(href)); } for (var i = startPage; i <= endPage; i++) { if (i == curPageIndex) { var curPageIndexText = "[" + i + "]"; if (setting.curPageIndexTextMark) { curPageIndexText = setting.curPageIndexTextMark.replace(/{#pageIndex}/, i) } var curlink = $('<span>' + curPageIndexText + '</span>'); setLinkCss(curlink, true); pagingSpan.append(curlink); } else { var pageIndexText = i; if (setting.pageIndexTextMark) { pageIndexText = setting.pageIndexTextMark.replace(/{#pageIndex}/, i) } var href = $('<a href="#" mce_href="#" data-pageIndex=' + i + '>' + pageIndexText + '</a>').click(function () { var pageIndex = $(this).data('pageIndex'); gotoPageFunc(pageIndex, result); result.setting.curPageIndex = pageIndex; PagingUtil.display(result.setting); return false; }); setLinkCss(href, false); pagingSpan.append($('<span/>').append(href)); } } if (isHaveNextGroup) { var nextGroupLinkText = (setting.nextGroupLinkText) ? setting.nextGroupLinkText : '[...]'; var href = $('<a href="#" mce_href="#" >' + nextGroupLinkText + '</a>').click(function () { gotoPageFunc(result.nextGroupFirstPage, result); result.setting.curPageIndex = result.nextGroupFirstPage; PagingUtil.display(result.setting); return false; }); setLinkCss(href, false); pagingSpan.append($('<span/>').append(href)); } pagingRenderTo.html('').append(pagingSpan); return pagingSpan; }, display: function (setting, pagingRender) { //debugger; var pages = 1, startPage = 1, endPage = 1; var pageGroups = 1, curPageGroup = 1; var total = setting.total; var pageSize = setting.pageSize; var curPageIndex = setting.curPageIndex; var pageGroupCount = setting.pageGroupCount; /* calculate pages */ pages = PagingUtil._calculateRemainder(total, pageSize); if (pages < 1) pages = 1; /* calculate pageGroups */ pageGroups = PagingUtil._calculateRemainder(pages, pageGroupCount); if (pageGroups < 1) pageGroups = 1; /* calculate curPageGroup */ curPageGroup = PagingUtil._calculateRemainder(curPageIndex, pageGroupCount); if (curPageGroup < 1) curPageGroup = 1; /* calculate startPage & endPage */ endPage = curPageGroup * pageGroupCount; if (endPage > pages) endPage = pages; startPage = curPageGroup * pageGroupCount - pageGroupCount + 1; if (startPage < 1) startPage = 1; var result = { curPageGroup: curPageGroup, pageGroupCount: pageGroupCount, startPage: startPage, endPage: endPage, curPageIndex: curPageIndex, pageGroups: pageGroups, total: total } if (curPageGroup > 1) { var prewGroupLastPage = curPageGroup * pageGroupCount - pageGroupCount; result.isHavePreGroup = true; result.prewGroupLastPage = prewGroupLastPage; } if (curPageGroup < pageGroups) { var nextGroupFirstPage = curPageGroup * pageGroupCount + 1; result.isHaveNextGroup = true; result.nextGroupFirstPage = nextGroupFirstPage; } if (pagingRender == null) pagingRender = PagingUtil._defaultPagingRender; result.setting = setting; return pagingRender(result); } }; jQuery.fn.paging = function (setting, pagingRender) { setting.pagingRenderTo = $(this); PagingUtil.display(setting, pagingRender); }; })(jQuery); }; 调用的简单demo: $('#pagelist').paging({ total: 100, pageSize: 6, curPageIndex: 1, pageGroupCount: 6, prewGroupLinkText: '<<', nextGroupLinkText: '>>', pageLinkCss: 'cssPageLink', curPageLinkCss: 'cssCurPageLink', pagingContainerCss: 'cssPagingContainer', curPageIndexTextMark: '{{#pageIndex}}', pageIndexTextMark: '({#pageIndex})', gotoPageFunc: function (curPageIndex, result) { alert(curPageIndex); } });