简单的分页效果

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

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;
    			}
    		}()
    	}
    	
    }