简单的分页效果

最近几个项目都用到了分页，简单记录下，方便以后用，代码是参照以前一篇博客修改的，忘记是哪个了。。

1、HTML代码

<table cellpadding="10px" cellspacing="10px" width="100%" id="table1">
<caption>游戏信息</caption>
<thead>
<th>游戏名称</th>
<th>图片</th>
<th>详细介绍</th>
<th>规则</th>
<th>奖品</th>
<th>参与人数</th>
<th>下载地址</th>
<th>是否有线下活动</th>
<th>操作</th>
</thead>
<tbody></tbody>
</table>
<div id="page1" class="page"></div>

2、相关的css

/* 分页 **/
.page {
margin: 2em;
/* padding-left:400px; */
float:right;
}

.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;
}3、最重要的js代码
//分页，//container 容器，count 总页数,pageNum是一个全局变量，表示当前页码
function setPage(container, count) {
var container = container;
var count = count;
if(count > 0){
//console.log("页数eeee："+count);
var a = [];
//总页数少于10 全部显示,大于10 显示前3 后3 中间3 其余....
if (pageNum == 1) {
a[a.length] = "<a href=\"javascript:void(0);\" class=\"prev unclick\">上一页</a>";
} else {
a[a.length] = "<a href=\"javascript:void(0);\" class=\"prev\">上一页</a>";
}
function setPageList() {
if (pageNum == i) {
a[a.length] = "<a href=\"javascript:void(0);\" class=\"on\">"
+ i + "</a>";
} else {
a[a.length] = "<a href=\"javascript:void(0);\">" + i
+ "</a>";
}
}
//总页数小于10
if (count <= 10) {
for (var i = 1; i <= count; i++) {
setPageList();
}
}
//总页数大于10页
else {
if (pageNum <= 4) {
for (var i = 1; i <= 5; i++) {
setPageList();
}
a[a.length] = "...<a href=\"javascript:void(0);\">" + count
+ "</a>";
} else if (pageNum >= count - 3) {
a[a.length] = "<a href=\"javascript:void(0);\">1</a>...";
for (var i = count - 4; i <= count; i++) {
setPageList();
}
} else { //当前页在中间部分
a[a.length] = "<a href=\"javascript:void(0);\">1</a>...";
for (var i = pageNum - 2; i <= pageNum + 2; i++) {
setPageList();
}
a[a.length] = "...<a href=\"javascript:void(0);\">" + count
+ "</a>";
}
}
if (pageNum == count) {
a[a.length] = "<a href=\"javascript:void(0);\" class=\"next unclick\">下一页</a>";
} else {
a[a.length] = "<a href=\"javascript:void(0);\" class=\"next\">下一页</a>";
}
container.innerHTML = a.join("");
//事件点击
var pageClick = function() {
var oAlink = container.getElementsByTagName("a");
//var inx = pageNumber; //初始的页码
oAlink[0].onclick = function() { //点击上一页
if (pageNum == 1) {
return false;
}
pageNum--;
getTopics(pageNum); //此方法为ajax调用，从后台取数据

return false;
}
for (var i = 1; i < oAlink.length - 1; i++) { //点击页码
oAlink[i].onclick = function() {
pageNum = parseInt(this.innerHTML);
getTopics(pageNum);
return false;
}
}
oAlink[oAlink.length - 1].onclick = function() { //点击下一页
if (pageNum == count) {
return false;
}
pageNum++;
getTopics(pageNum);
return false;
}
}()
}

}