jsp页面分页实现

大多数时候，我们分页都在数据库中分页好，然后传到页面上，今天记录一个新的分页方式。

需求：所有数据通过webservice服务获取到，在js中对数据实现假分页。

代码如下：

 function Paging(index){  
		debugger;
	                var RankInfo = document.getElementById("recode"); 
	                var totalPage = RankInfo.rows.length; //总条数  
	                var pageSize = 10;//每页显示条数  
	                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='finedo-page-canhide' href=\"javascript:Paging(1)\" title=\"首页\">首页</a>";  
	                    var up =parseInt(currentPage)-1;  
	                    if(up<1){up =1;}  
	                    pageHTML += "<a class='finedo-btn-num' 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);  
	                }  
	              }          
      
       

初始化方法：

$(function(){
		$.ajax({
			url:"${ctx }/finedo/saartifactoryidquery/idquery",
			type:"POST",
			dataType:'json',
			data:{},
			success:function(data){
				 result = data.resEntities.resEntity;
				var html = "<tbody id='recode'> ";
				for(i=0;i<result.length;i++){					
					html += '<tr>';
					html += '<td id="">'+result[i].id+'</td>';
					html += '<td id="">'+result[i].name+'</td>';
					html += '<td><a href="#" onclick="toSubmit(\''+result[i].id+'\')">下载</a></td></tr>';
				}
				html+="</tbody>"
				$("#download").append(html);
				Paging(1);
				
			}		
		});
		
	})

页面：

<div id="page"></div>

当然了，页面的样式有那么点丑啦，要用的同志们需要改善一下样式。