您的位置：首页 > Web前端 > JavaScript

js分页函数

2015-11-20 21:22 931 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#page a {margin: 10px;}
</style>
<script type="text/javascript">
window.onload = function () {
page({
id : 'page',
nowNum : 9,
allNum : 10,
bBtn : false,
callBack : function(now,all) {
alert('当前页:' + now +',总共页:'+all);
}
})
function page(opt) {
if (!opt.id) {return};
var nowNum = opt.nowNum || 1;
var allNum = opt.allNum || 5;
var bBtn = opt.bBtn || false;
var callBack = opt.callBack || function(){};
var obj = document.getElementById(opt.id);

if (allNum >= 6 && nowNum >=5) {
var a = document.createElement('a');
a.href = '#1';
a.innerHTML = '首页';
obj.appendChild(a)
};

if (nowNum >= 2) {
var a = document.createElement('a');
a.href = '#'+(nowNum-1);
a.innerHTML = '上一页';
obj.appendChild(a)
};

if (allNum <= 5) {

for (var i = 1; i <= allNum; i++) {
var a = document.createElement('a');
a.href = '#'+i;
if (i == nowNum) {
a.innerHTML = i;
} else {
a.innerHTML = '['+ i +']'
}

obj.appendChild(a)
};

}else {
if (nowNum ==1 || nowNum == 2) {
// if (opt.nowNum == 1) {
for (var i = 1; i <= 5; i++) {
var a = document.createElement('a');
a.href = '#'+i;
if (i == nowNum) {
a.innerHTML = i;
} else {
a.innerHTML = '['+ (i) +']'
}

obj.appendChild(a)
};
// };

}
else if(  (allNum - nowNum) <= 1 ) {    //opt.nowNum ==9 || opt.nowNum == 10
for (var i = 1; i <= 5; i++) {
var a = document.createElement('a');
a.href = '#' + (allNum - 5 + i);
// if (i == opt.nowNum) {
//  a.innerHTML = opt.allNum - opt.nowNum + 5;
// } else {
//  a.innerHTML = '['+ (opt.allNum - opt.nowNum + 5) +']'
// }
if( (allNum-nowNum == 0 && i==5) || (allNum - nowNum == 1 && i==4) ){
a.innerHTML = (allNum - 5 + i);
}else{
a.innerHTML = '['+ (allNum - 5 + i) +']';
}

obj.appendChild(a)
};

// oA.href = '#' + (allNum - 5 + i);

//    if((allNum - nowNum) == 0 && i==5){
//     oA.innerHTML = (allNum - 5 + i);
//    }
//    else if((allNum - nowNum) == 1 && i==4){
//     oA.innerHTML = (allNum - 5 + i);
//    }
//    else{
//     oA.innerHTML = '['+ (allNum - 5 + i) +']';
//    }

}
else {
for (var i = 1; i <= 5; i++) {
var a = document.createElement('a');
a.href = '#'+(nowNum-3+i);
if (i == 3) {
a.innerHTML = nowNum-3+i;
} else {
a.innerHTML = '['+ (nowNum-3+i) +']'
}

obj.appendChild(a)
};
}

}

if ((allNum-nowNum) >= 1) {
var a = document.createElement('a');
a.href = '#'+(nowNum+1);
a.innerHTML = '下一页';
obj.appendChild(a)
};
if (allNum >= 6 && (allNum-nowNum) >=3 ) {
var a = document.createElement('a');
a.href = '#'+allNum;
a.innerHTML = '尾页';
obj.appendChild(a)
};
if (bBtn) {
callBack(nowNum,allNum);

};

var aBtn = obj.getElementsByTagName('a');
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = function() {
var nowNum = parseInt(this.getAttribute('href').substring(1));

obj.innerHTML = '';
page({

id : opt.id,
nowNum : nowNum,
allNum : allNum,
bBtn : true,
callBack : callBack

});
// callBack(nowNum,allNum);
return false;
}

};
}
}
</script>
</head>
<body>
<div id="page">
<!-- <a href="#10">首页</a>
<a href="#1">上一页</a>
<a href="#2">[2]</a>
<a href="#3">[3]</a>
<a href="#4">4</a>
<a href="#5">[5]</a>
<a href="#6">[6]</a>
<a href="#7">下一页</a>
<a href="#10">尾页</a> -->
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  js分页
相关文章推荐
新的分享
章节导航