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>

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

文章来源: jsp页面分页实现