纯JS实现分页

JSP

<table id="blogs">
	<c:forEach var="blog" items="${blogs }">
		<tr>
			<td><a href="activities/blog.jsp?blogID=${blog.blogID }">${blog.title }</a></td>
		</tr>
	</c:forEach>
</table>
<div id="page_nav"></div>

JS

function goPage(pno, psize) {

	var blogs = document.getElementById("blogs");
	var totalCount = blogs.rows.length; // 总博客数
	var pageSize = psize; // 每页显示博客数
	var totalPage = parseInt(totalCount%pageSize == 0 ? totalCount/pageSize :  totalCount/pageSize + 1);	// 总页数
	var currentPage = pno; // 当前页数
	var startIndex = (currentPage - 1) * pageSize + 1; // 每页第一个博客的索引
	var endIndex = currentPage == totalPage ? totalCount : startIndex + pageSize -1 ;	// 每页最后一个博客的索引
		
	// 遍历所有博客实现分页
	for(var i = 1;i<(totalCount +1);i++){	
		brow = blogs.rows[i-1];
		if(i >= startIndex && i <= endIndex){
			brow.style.display = "block";
		}else{
			brow.style.display = "none";
		}
		// 隔行背景变色
		if(i % 2 == 0){
			brow.style.backgroundColor = "#FFFFF4";
		}
	}

	var tempStr = totalCount + "条  共" + totalPage + "页  当前第" + currentPage + "页  ";

	if(currentPage > 1){
		tempStr += '<a href="#" οnclick="goPage(1,'+pageSize+')"> 首页  </a>';
		tempStr += '<a href="#" οnclick="goPage(' + (currentPage - 1) + ',' + pageSize + ')"> 上一页</a>';
	}else{
		tempStr += " 首页 ";
		tempStr += " 上一页 ";
	}

	if(currentPage < totalPage){
		tempStr += '<a href="#" οnclick="goPage(' + (currentPage + 1) + ',' + pageSize + ')"> 下一页</a>';
		tempStr += '<a href="#" οnclick="goPage(' + (totalPage) + ','+pageSize + ')"> 尾页  </a>';
	}else{
		tempStr += " 下一页 ";
		tempStr += " 尾页 ";
	}

	document.getElementById("page_nav").innerHTML = tempStr;
}