<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>分页JS代码</title>
<style type="text/css">
.page{margin:2em;}
.page a{text-decoration:none;display:inline-block;line-height:14px;padding:2px 5px;color:#333;border:1px solid #ccc;margin:0 2px;}
.page a:hover,.page a.on{background:#999;color:#fff;border:1px solid #333;}
.page a.unclick,.page a.unclick:hover{background:none;border:1px solid #eee;color:#999;cursor:default;}
</style>
<script src="/js/jquery-1.7.1.js" type="text/javascript"></script>
</head>
<body>
<div class="page"></div>
<div class="page" id="div2"></div>
</body>
<script type="text/javascript">
//container 容器，count 总页数 pageindex 当前页数
function setPage(container, count, pageindex) {
var container = container;
var count = count;
var pageindex = pageindex;
var a = [];
//总页数少于10 全部显示,大于10 显示前3 后3 中间3 其余....
if (pageindex == 1) {
a[a.length] = "<a href=\"#\" class=\"prev unclick\">首页</a>";
a[a.length] = "<a href=\"#\" class=\"prev unclick\"><<</a>";
} else {
a[a.length] = "<a href=\"#\" class=\"prev\">首页</a>";
a[a.length] = "<a href=\"#\" class=\"prev\"><<</a>";
}
//总页数小于10
if (count <= 10) {
for (var i = 1; i <= count; i++) {
setPageList(pageindex,i,a);
}
}else {
//总页数大于10页
if (pageindex <= 4) {
for (var i = 1; i <= 5; i++) {
setPageList(pageindex,i,a);
}
a[a.length] = "...<a href=\"#\">" + count + "</a>";
}else if (pageindex >= count - 3) {
a[a.length] = "<a href=\"#\">1</a>...";
for (var i = count - 4; i <= count; i++) {
setPageList(pageindex,i,a);
}
}
else { //当前页在中间部分
a[a.length] = "<a href=\"#\">1</a>...";
for (var i = pageindex - 2; i <= pageindex + 2; i++) {
setPageList(pageindex,i,a);
}
a[a.length] = "...<a href=\"#\">" + count + "</a>";
}
}
if (pageindex == count) {
a[a.length] = "<a href=\"#\" class=\"next unclick\">>></a>";
a[a.length] = "<a href=\"#\" class=\"next unclick\">尾页</a>";
} else {
a[a.length] = "<a href=\"#\" class=\"next\">>></a>";
a[a.length] = "<a href=\"#\" class=\"next\">尾页</a>";
}
container.html(a.join(""));
//事件点击
var oAlink = container.find("a");
var inx = pageindex; //初始的页码
//点击首页
$(oAlink[0]).click(function(){
if (inx == 1) {
return false;
}else{
setPage(container, count, 1);
}
});
//点击上一页
$(oAlink[1]).click(function(){
if (inx == 1) {
return false;
}
inx--;
setPage(container, count, inx);
return false;
});
for(var i=2;i<oAlink.length-2;i++){
$(oAlink[i]).click(function(){
inx = parseInt($(this).html());
setPage(container, count, inx);
return false;
});
}
//点击下一页
$(oAlink[oAlink.length - 2]).click(function(){
if (inx == count) {
return false;
}
inx++;
setPage(container, count, inx);
return false;
});
//点击尾页
$(oAlink[oAlink.length - 1]).click(function(){
if(inx == count){
return false;
}else{
setPage(container, count, count);
}
});
}
/**
* 设置分页的初始值
* @param {Object} pageindex 当前页码
* @param {Object} i
* @param {Object} a 存放分页html的数组
*/
function setPageList(pageindex,i,a) {
if (pageindex == i) {
a[a.length] = "<a href=\"#\" class=\"on\">" + i + "</a>";
} else {
a[a.length] = "<a href=\"#\">" + i + "</a>";
}
}
// setPage(document.getElementsByTagName("div")[0],10,1);
setPage($("#div2"),12,5);
</script>
</html>
效果图如下：
时间： 2024-12-28 08:31:16