jquery.pager.js实现分页效果

2020-05-24 21:26:20易采站长站整理

* buttonClickCallback is the method to fire when a pager button is clicked.
*
* buttonClickCallback signiture is PagerClickTest = function(pageclickednumber)
* Where pageclickednumber is the number of the page clicked in the control.
*
* The included Pager.CSS file is a dependancy but can obviously tweaked to your wishes
* Tested in IE6 IE7 Firefox & Safari. Any browser strangeness, please report.
*/
(function($) {

$.fn.pager = function(options) {

var opts = $.extend({}, $.fn.pager.defaults, options);

return this.each(function() {

// empty out the destination element and then render out the pager with the supplied options
$(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));

// specify correct cursor activity
$('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; });
});
};

// render and return the pager with the supplied options
function renderpager(pagenumber, pagecount, buttonClickCallback) {

// setup $pager to hold render
var $pager = $('<ul class="pages"></ul>');

// add in the previous and next buttons
//$pager.append(renderButton('first', pagenumber, pagecount, buttonClickCallback)).append(renderButton('prev', pagenumber, pagecount, buttonClickCallback));
$pager.append(renderButton('上一页', pagenumber, pagecount, buttonClickCallback));
// pager currently only handles 10 viewable pages ( could be easily parameterized, maybe in next version ) so handle edge cases
var startPoint = 1;
//var endPoint = 9;
var endPoint = 5;
if (pagenumber > 4 && pagenumber<pagecount-1) {
startPoint = pagenumber - 2;
endPoint = pagenumber + 2;
}
if(pagenumber>pagecount-2&& pagenumber<pagecount+1){
startPoint = pagecount - 4;
endPoint = pagecount;
}
if (endPoint > pagecount) {
startPoint = pagecount - 8;
endPoint = pagecount;
}

if (startPoint < 1) {
startPoint = 1;
}

// loop thru visible pages and render buttons
for (var page = startPoint; page <= endPoint; page++) {

var currentButton = $('<li class="page-number">' + (page) + '</li>');

page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() { buttonClickCallback(this.firstChild.data); });
currentButton.appendTo($pager);
}

// render in the next and last buttons before returning the whole rendered control back.
//$pager.append(renderButton('next', pagenumber, pagecount, buttonClickCallback)).append(renderButton('last', pagenumber, pagecount, buttonClickCallback));
$pager.append(renderButton('下一页', pagenumber, pagecount, buttonClickCallback));
return $pager;