js实现静态分页

不喜欢说废话，我把代码贴出来，自己去试试，不明白的地方可以留言哈~

html:

<script src="jquery.min-2.0.0.js" type="text/javascript"></script> 

<table>
       <thead>
	       <tr>
		       <th>数目</th>
		       <th>姓名</th>
		       <th>班级</th>
		       <th>备注</th>
	       </tr>
       </thead>           
       <tbody id= 'record'>
	       <tr><th>1</th><th>姓名1</th><th>1</th><th>备注</th></tr>
	       <tr><th>2</th><th>姓名2</th><th>1</th><th>备注</th></tr>
	       <tr><th>3</th><th>姓名3</th><th>2</th><th>备注</th></tr>
	       <tr><th>4</th><th>姓名4</th><th>3</th><th>备注</th></tr>
	       <tr><th>5</th><th>姓名5</th><th>5</th><th>备注</th></tr>
	       <tr><th>6</th><th>姓名6</th><th>4</th><th>备注</th></tr>
	       <tr><th>7</th><th>姓名7</th><th>6</th><th>备注</th></tr>
	       <tr><th>7</th><th>姓名7</th><th>6</th><th>备注</th></tr>
	       <tr><th>7</th><th>姓名7</th><th>6</th><th>备注</th></tr>
	       <tr><th>7</th><th>姓名7</th><th>6</th><th>备注</th></tr>
	       <tr><th>7</th><th>姓名7</th><th>6</th><th>备注</th></tr>
	       <tr><th>7</th><th>姓名7</th><th>6</th><th>备注</th></tr>
	       <tr><th>7</th><th>姓名7</th><th>6</th><th>备注</th></tr>
       </tbody>
       <tfoot id='page'></tfoot>   
	</table>  

JS方法

<span style="font-size:14px;"><script>
	function Paging(index){
			var RankInfo = document.getElementById('record');
			var totalPage = RankInfo.rows.length; //总条数
			var	pageSize = 5;//每页显示条数
			var pageNumber = Math.ceil(totalPage/pageSize); //总页数
			var currentPage = index;//当前页数
			var start_row = (currentPage-1)*pageSize;//开始显示的行
			var end_row = currentPage*pageSize;//结束显示的行
				end_row = (end_row > totalPage) ? totalPage : end_row;
			for(var i=0;i<totalPage;i++){
				var irow = RankInfo.rows[i];
				if(i>=start_row && i<end_row){
					irow.style.display = 'table-row';
				}else {
					irow.style.display = 'none';
				}
			}	
			var pageHTML = '';
				pageHTML += "<a class='p_first' href=\"javascript:Paging(1)\" title=\"上一页\">上一页</a>";
				var up =parseInt(currentPage)-1;
				if(up<1){up =1;}
				pageHTML += "<a class='p_prev' href=\"javascript:Paging("+up+")\" title=\"上一页\">上一页</a>";
				pageHTML+="<span>"+currentPage+"/"+pageNumber+"</span>";		

			var next =parseInt(currentPage)+1;
			    if(next >pageNumber){ next = pageNumber ;}
				pageHTML += "<a class='p_next js_page' href=\"javascript:Paging("+next+")\" title=\"下一页\">下一页</a>";		
				pageHTML += "<a  class='p_last js_page' href=\"javascript:Paging("+pageNumber+")\" title=\"下一页\">下一页</a>";	
			if(totalPage == 0){
				$("#page").html('');
			}else {
				$("#page").html(pageHTML);
			}
          }    

   Paging(1);
</script></span>

样式问题就自己调试了。