/*
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);
 效果:

写了个pager, 可供参考-LMLPHP

05-11 11:35