写了个pager, 可供参考
/* Author: Calos Description: patv2 pager !import: this pager goes with the time, we just temporarily stay, what a sad fact! */ (function ($) { $.fn.patpager = function (options) { options = options || { turnPageTriggered: function (indexer) { indexer = indexer || { pageIndex: 1, pageSize: 10 }; }, pageIndex: 1, pageSize: 10, pageCount: 10 }; var pagerStatus = { pageIndex: options.pageIndex || 1, pageSize: options.pageSize || 10 }; var $this = $(this); $this.children().remove(); var timestamp = new Date().getTime(); var caching = {}; var fetchIndexer = function (indexerTo, transform) { if (options.turnPageTriggered) { transform(); options.turnPageTriggered(indexerTo); } } var components = { Turntopage: '<label>Turn to page</label>', pageIndex: function (num) { return '<input type="text" class="pageTo" value=' + num + '>'; }, previousPage: '<a class="prev"><<</a>', curStatus: function (pageIndex, totalPages) { return 'page <span class="cur">' + pageIndex + '</span> of <span class="totalPages">' + totalPages + '</span>'; }, nextPage: '<a class="next">>></a>' }; var methods = { createPager: function (pageIndex, totalPage) { var html = '<div class=' + timestamp + ' >' + components.Turntopage + components.pageIndex(pageIndex) + components.previousPage + components.curStatus(pageIndex, totalPage) + components.nextPage + '</div>'; $this.html(html); }, refreshCache: function () { caching = { pageTo: $this.find('.pageTo'), prev: $this.find('.prev'), pageIndex: $this.find('.cur'), totalPages: $this.find('.totalPages'), next: $this.find('.next') } $(".prev,.next").css('cursor', 'pointer'); }, initPager: function (option) { methods.createPager(option.pageIndex, option.pageSize); this.refreshCache(); }, pageIndexChanged: function (pager, sendInitTableRequest) { pager = pager || { pageTo: 1, pageSize: 10 }; var totalPage = sendInitTableRequest(pager); caching.pageIndex.text(pager.pageTo); }, setCurrentPage: function (pageTo) { caching.pageIndex.text(pageTo >= 1 ? pageTo : 1) }, getCurrentPage: function () { return parseInt(caching.pageIndex.text()); }, ensureFirstPage: function () { return this.getCurrentPage() === 1; }, ensureLastPage: function () { return this.getCurrentPage() === options.pageCount; }, turnToPreviousPage: function () { pagerStatus.pageIndex = methods.getCurrentPage() - 1; fetchIndexer(pagerStatus, function () { methods.setCurrentPage(pagerStatus.pageIndex); }); }, turnToNextpage: function () { pagerStatus.pageIndex = methods.getCurrentPage() + 1; fetchIndexer(pagerStatus, function () { methods.setCurrentPage(pagerStatus.pageIndex); }); }, turnTopage: function (index) { pagerStatus.pageIndex = index; fetchIndexer(pagerStatus, function () { methods.setCurrentPage(pagerStatus.pageIndex); }); }, ensureValidPageIndex: function () { var i = caching.pageTo.val(); var c = parseInt(caching.totalPages.text()); if (i <= 0) { caching.pageTo.val(1); caching.pageIndex.text(1); return true; } if (i >= c) { caching.pageTo.val(c); caching.pageIndex.text(c); return true; } return /\d/gim.test(i) && i > 0 && i < parseInt(caching.totalPages.text()); } }; var behaviors = { prevClick: function () { methods.turnToPreviousPage(); }, nextClick: function () { methods.turnToNextpage(); }, curChange: function () { } }; var getFrame = function (selector) { return '.' + timestamp + ' ' + selector; } $this.on('click', getFrame('.prev'), function (e) { if (!methods.ensureFirstPage()) behaviors.prevClick(); }); $this.on('click', getFrame('.next'), function (e) { if (!methods.ensureLastPage()) behaviors.nextClick(); }); $this.on('keydown blur', '.pageTo', function (e) { var eType = $.inArray(e.type, ['focusout', 'keydown']); if ((eType === 1 && e.keyCode === 13) || eType === 0) { if (methods.ensureValidPageIndex()) { var index = caching.pageTo.val(); methods.turnTopage(index); } } }); methods.initPager(options); return this; } })(jQuery);
效果: