jquery.page2.js
1.引入頭文件，詳細使用方式參見http://127.0.0.1:8080/default/xshdbx/welcome.jsp：
<script src="js/jquery.page2.js"></script>
2.//使用
$(function() {
// 分頁器
$("#page").Page({
totalPages: 3, //分頁總數
liNums: 7, //分頁的數字按鈕數(建議取奇數)
activeClass: 'activP', //active 類樣式定義
nowPage:3,
callBack: function(page) {
}
});
});
注意：jquery.page2.js 比jquery.page.js 多一個參數：nowPage。更能適應當
頁面跳轉時，發現後臺因爲用戶的增刪改查引起，頁面總數，當前頁發生變化的情況。
/*
*page plugin 1.0 2016-09-29 by cary
*/
(function($) {
//默認參數
var defaults = {
totalPages: 9, //總頁數
liNums: 9, //分頁的數字按鈕數(建議取奇數)
nowPage:1,
activeClass: 'active', //active類
firstPage: '首頁', //首頁按鈕名稱
lastPage: '末頁', //末頁按鈕名稱
prv: '«', //前一頁按鈕名稱
next: '»', //後一頁按鈕名稱
hasFirstPage: true, //是否有首頁按鈕
hasLastPage: true, //是否有末頁按鈕
hasPrv: true, //是否有前一頁按鈕
hasNext: true, //是否有後一頁按鈕
callBack: function(page) {
//回掉，page選中頁數
}
};
//插件名稱
$.fn.Page = function(options) {
//覆蓋默認參數
var opts = $.extend(defaults, options);
//主函數
return this.each(function() {
var obj = $(this);
var l = opts.totalPages;
var n = opts.liNums;
var active = opts.activeClass;
var str = '';
var str1 = '<li><a href="javascript:" class="' + active + '">1</a></li>';
if (l > 1 && l < n + 1) {
for (i = 2; i < l + 1; i++) {
str += '<li><a href="javascript:">' + i + '</a></li>';
}
} else if (l > n) {
for (i = 2; i < n + 1; i++) {
str += '<li><a href="javascript:">' + i + '</a></li>';
}
}
var dataHtml = '';
if (opts.hasNext) {
dataHtml += '<div class="next fr">' + opts.next + '</div>';
}
// if (opts.hasLastPage) {
// dataHtml += '<div class="last fr">' + opts.lastPage + '</div>';
// }
dataHtml += '<ul class="pagingUl">' + str1 + str + '</ul>';
// if (opts.hasFirstPage) {
// dataHtml += '<div class="first fr">' + opts.firstPage + '</div>';
// }
if (opts.hasPrv) {
dataHtml += '<div class="prv fr">' + opts.prv + '</div>';
}
obj.html(dataHtml).off("click"); //防止插件重複調用時，重複綁定事件
if(opts.nowPage !=1){
var pageshow=opts.nowPage;
var nums = odevity(n);
if (l > n) {
if (pageshow > l - nums / 2 && pageshow < l + 1) {
//最後幾項
fpageNext((n - 1) - (l - pageshow));
} else if (pageshow > 0 && pageshow < nums / 2) {
//最前幾項
fpagePrv(pageshow - 1);
} else {
fpageShow(pageshow);
}
} else {
fpagePrv(pageshow - 1);
}
}
obj.on('click', '.next', function() {
var pageshow = parseInt($('.' + active).html());
var nums, flag;
var a = n % 2;
if (a == 0) {
//偶數
nums = n;
flag = true;
} else if (a == 1) {
//奇數
nums = (n + 1);
flag = false;
}
if (pageshow >= l) {
return;
} else if (pageshow > 0 && pageshow <= nums / 2) {
//最前幾項
$('.' + active).removeClass(active).parent().next().find('a').addClass(active);
} else if ((pageshow > l - nums / 2 && pageshow < l && flag == false) || (pageshow > l - nums / 2 - 1 && pageshow < l && flag == true)) {
//最後幾項
$('.' + active).removeClass(active).parent().next().find('a').addClass(active);
} else {
$('.' + active).removeClass(active).parent().next().find('a').addClass(active);
fpageShow(pageshow + 1);
}
opts.callBack(pageshow + 1);
});
obj.on('click', '.prv', function() {
var pageshow = parseInt($('.' + active).html());
var nums = odevity(n);
if (pageshow <= 1) {
return;
} else if ((pageshow > 1 && pageshow <= nums / 2) || (pageshow > l - nums / 2 && pageshow < l + 1)) {
//最前幾項或最後幾項
$('.' + active).removeClass(active).parent().prev().find('a').addClass(active);
} else {
$('.' + active).removeClass(active).parent().prev().find('a').addClass(active);
fpageShow(pageshow - 1);
}
opts.callBack(pageshow - 1);
return;
});
obj.on('click', '.first', function() {
var activepage = parseInt($('.' + active).html());
if (activepage <= 1) {
return
} //當前第一頁
opts.callBack(1);
return;
fpagePrv(0);
});
obj.on('click', '.last', function() {
var activepage = parseInt($('.' + active).html());
if (activepage >= l) {
return;
} //當前最後一頁
opts.callBack(l);
return;
if (l > n) {
fpageNext(n - 1);
} else {
fpageNext(l - 1);
}
});
obj.on('click', 'li', function() {
var $this = $(this);
var pageshow = parseInt($this.find('a').html());
var nums = odevity(n);
opts.callBack(pageshow);
return;
if (l > n) {
if (pageshow > l - nums / 2 && pageshow < l + 1) {
//最後幾項
fpageNext((n - 1) - (l - pageshow));
} else if (pageshow > 0 && pageshow < nums / 2) {
//最前幾項
fpagePrv(pageshow - 1);
} else {
fpageShow(pageshow);
}
} else {
$('.' + active).removeClass(active);
$this.find('a').addClass(active);
}
});
//重新渲染結構
/*activePage 當前項*/
function fpageShow(activePage) {
var nums = odevity(n);
var pageStart = activePage - (nums / 2 - 1);
var str1 = '';
for (i = 0; i < n; i++) {
str1 += '<li><a href="javascript:" class="">' + (pageStart + i) + '</a></li>'
}
obj.find('ul').html(str1);
obj.find('ul li').eq(nums / 2 - 1).find('a').addClass(active);
}
/*index 選中項索引*/
function fpagePrv(index) {
var str1 = '';
if (l > n - 1) {
for (i = 0; i < n; i++) {
str1 += '<li><a href="javascript:" class="">' + (i + 1) + '</a></li>'
}
} else {
for (i = 0; i < l; i++) {
str1 += '<li><a href="javascript:" class="">' + (i + 1) + '</a></li>'
}
}
obj.find('ul').html(str1);
obj.find('ul li').eq(index).find('a').addClass(active);
}
/*index 選中項索引*/
function fpageNext(index) {
var str1 = '';
if (l > n - 1) {
for (i = l - (n - 1); i < l + 1; i++) {
str1 += '<li><a href="javascript:" class="">' + i + '</a></li>'
}
obj.find('ul').html(str1);
obj.find('ul li').eq(index).find('a').addClass(active);
} else {
for (i = 0; i < l; i++) {
str1 += '<li><a href="javascript:" class="">' + (i + 1) + '</a></li>'
}
obj.find('ul').html(str1);
obj.find('ul li').eq(index).find('a').addClass(active);
}
}
//判斷liNums的奇偶性
function odevity(n) {
var a = n % 2;
if (a == 0) {
//偶數
return n;
} else if (a == 1) {
//奇數
return (n + 1);
}
}
});
}
})(jQuery);