1. 分页器效果:
2.js代码
//定义分页器
(function($){
$.fn.extend({
cxPagination: function (options) {
var obj = this;
if (!options) {
console.error("pagination options is undefined!");
return false;
}
if (options['totalCount'] == undefined ) {
console.error(" totalCount in pagination options is undefined!");
return false;
}
var defaults = {
currentNumber: 1,
pageSize: 15,
pageSizeArr: [10, 15, 20],
onSelectPage:function(pageNumber,pageSize){
console.log("onSelectPage pageNumber: ");
console.log(pageNumber);
console.log("pageSize: ");
console.log(pageSize);
},
onChangePageSize:function(pageNumber,pageSize){
console.log("onChangePageSize pageNumber: ");
console.log(pageNumber);
console.log("pageSize: ");
console.log(pageSize);
},
};
var settings = $.extend(defaults, options);
var onSelectPage = settings.onSelectPage;
var onChangePageSize = settings.onChangePageSize;
var pageSize = settings.pageSize;
var pageSizeArr = settings.pageSizeArr;
var totalCount = settings['totalCount'];
var currentNumber = settings['currentNumber'];
var totalPageNumber = parseInt(totalCount/pageSize);
if(totalCount%pageSize > 0){
totalPageNumber += 1;
}
if(totalCount <= 0){
$(this).html("");
return;
}
if(currentNumber <= 0 ){
currentNumber = 1;
}
if(currentNumber > totalPageNumber){
currentNumber = totalPageNumber;
}
var startNumber = currentNumber - 2;
var endNumber = currentNumber + 2;
var isFirstPage = (currentNumber == 1);
var isLastPage = (currentNumber == totalPageNumber);
var paginationHtml = '<nav aria-label="Page navigation" style="float:right;font-size:13px;">';
paginationHtml += '<ul class="pagination">';
paginationHtml += '<li><span style="margin-right:5px;border:0;">共<span>' + totalPageNumber + "</span>页/" + totalCount + "条</span></li>";
if (isFirstPage) {
paginationHtml += '<li>'
+ '<span aria-hidden="true">«</span></li>';
} else {
paginationHtml += '<li><a href="javascript:void(0);" aria-label="Previous">'
+ '<span aria-hidden="true">«</span>'
+ '</a></li>';
}
if (totalPageNumber > 0 && totalPageNumber <= 7) {
for (var i = 1; i <= totalPageNumber; i++) {
if(i == currentNumber){
paginationHtml += '<li class="active"><a href = "javascript:void(0);">' + i + '</a></li>';
}else {
paginationHtml += '<li><a href = "javascript:void(0);">' + i + '</a></li>';
}
}
} else if (totalPageNumber > 7) {
if (currentNumber <= 5) {
for (var i = 1; i <= 7; i++) {
if(i == currentNumber){
paginationHtml += '<li class="active"><a href = "javascript:void(0);">' + i + '</a></li>';
}else {
paginationHtml += '<li><a href = "javascript:void(0);">' + i + '</a></li>';
}
}
paginationHtml += '<li><a href="javascript:void(0);">...</a></li>';
} else if (currentNumber > 5 && currentNumber < totalPageNumber - 3) {
paginationHtml += '<li><a href="javascript:void(0);">1</a></li>'
+ '<li><a href="javascript:void(0);">2</a></li>'
+ '<li><a href="javascript:void(0);">...</a></li>';
for (var i = startNumber; i <= endNumber; i++) {
if(i == currentNumber){
paginationHtml += '<li class="active"><a href = "javascript:void(0);">' + i + '</a></li>';
}else {
paginationHtml += '<li><a href = "javascript:void(0);">' + i + '</a></li>';
}
}
paginationHtml += '<li><a href="javascript:void(0);">...</a></li>';
} else if (currentNumber >= totalPageNumber - 3 && currentNumber <= totalPageNumber) {
paginationHtml += '<li><a href="javascript:void(0);">1</a></li>'
+ '<li><a href="javascript:void(0);">2</a></li>'
+ '<li><a href="javascript:void(0);">...</a></li>';
for (var i = startNumber; i <= totalPageNumber; i++) {
if(i == currentNumber){
paginationHtml += '<li class="active"><a href = "javascript:void(0);">' + i + '</a></li>';
}else {
paginationHtml += '<li><a href = "javascript:void(0);">' + i + '</a></li>';
}
}
}
}
if (isLastPage) {
paginationHtml += '<li>'
+ '<span aria-hidden="true">»</span></li>';
} else {
paginationHtml += '<li><a href="javascript:void(0);" aria-label="Next">'
+ '<span aria-hidden="true">»</span>'
+ '</a></li>';
}
paginationHtml += '<li><select style="margin-left:5px;border: 1px solid #ddd;padding: 6px 12px;'
+ 'border-radius: 4px;float:left;">';
$.each(pageSizeArr, function(index, ele){
if(ele == pageSize){
paginationHtml += '<option selected value="' + ele + '">' + ele + '条/页</option>';
}else {
paginationHtml += '<option value="' + ele + '">' + ele + '条/页</option>';
}
});
paginationHtml += '</select></li>';
paginationHtml += '<li style="margin-left:10px;">跳至<input style="width: 40px;text-align: center;border-radius: 4px;border: 1px solid #ddd;'
+ 'margin: 0px 5px;line-height:24px;" id="pageNumberInput" value="' + currentNumber + '"/>页 '
+ '<button class="btn btn-default" style="padding: 4px 8px;font-size: 13px;margin-left: 5px;">确定</button></li>';
paginationHtml += '</ul></nav>';
$(this).html(paginationHtml);
$(this).find("li").on('click',function(){
var linkArr = $(this).find("a");
if(linkArr && linkArr.length > 0){
var linkText = linkArr[0].innerText;
//点击的是页码时
if(notNegativeIntegerNumber(linkText)){//点击的是页数
//$(".pagination").find("li").removeClass("active");
//$(this).addClass("active");
currentNumber=linkText;
//页码 页大小改变时 重新加载渲染分页器
obj.cxPagination({
totalCount:totalCount,
currentNumber:currentNumber,
pageSize:pageSize
});
onSelectPage(currentNumber, pageSize);
}else{
var ariaLabel = linkArr[0].getAttribute("aria-label");
console.log("ariaLabel: " + ariaLabel);
//点击的是上一页或下一页按钮时
if(ariaLabel) {
if (ariaLabel == "Previous") {
currentNumber = currentNumber - 1;
//onSelectPage(currentNumber, pageSize);
} else if (ariaLabel == "Next") {
currentNumber = currentNumber + 1;
//onSelectPage(currentNumber, pageSize);
}
//页码 页大小改变时 重新加载渲染分页器
obj.cxPagination({
totalCount: totalCount,
currentNumber: currentNumber,
pageSize: pageSize
});
onSelectPage(currentNumber, pageSize);
}
}
}
});
//pageSize change事件
$(this).find("li>select").on('change',function(e){
var newPageSize = e.target.value;
console.log("newPageSize: " + newPageSize);
pageSize = newPageSize;
//重新计算页数
totalPageNumber = parseInt(totalCount/pageSize);
if(totalCount%pageSize > 0){
totalPageNumber += 1;
}
//$("#totalPageNumber").html(totalPageNumber);
if(currentNumber > totalPageNumber){
currentNumber = totalPageNumber ;
}
//页码 页大小改变时 重新加载渲染分页器
obj.cxPagination({
totalCount:totalCount,
currentNumber:currentNumber,
pageSize:pageSize
});
onChangePageSize(currentNumber,newPageSize);
});
//跳转页面点击事件
$(this).find("li>button").on('click',function(e){
var newPageNumber = $("#pageNumberInput").val();
console.log("newPageNumber: " + newPageNumber);
if(newPageNumber == "" || newPageNumber == currentNumber){
return false;
}
if(newPageNumber > totalPageNumber){
newPageNumber = totalPageNumber;
}
currentNumber = newPageNumber;
//页码改变时 重新加载渲染分页器
obj.cxPagination({
totalCount:totalCount,
currentNumber:currentNumber,
pageSize:pageSize
});
onSelectPage(currentNumber, pageSize);
});
}
});
}(jQuery));
3. HTML代码 以及 调用代码
## 分页器
<div id="pp">
</div>
$(document).ready(function(){
//分页器
$("#pp").cxPagination({
totalCount:100,
currentNumber:5,
pageSize:15
});
});