jsp页面通过ajax取值/展示数据及分页显示

本文主要是介绍jsp页面通过ajax取值/展示数据及分页显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

jsp页面通过ajax从后台获取数据，在页面展示，并实现分页效果代码：

【JavaScript部分】

<script>
function getComposition(pageno){//alert(pageno); $.ajax({url:'<%=basePath%>composition/compositionlist',type:'post',data:"pageno="+pageno,success:function(data){     document.getElementById("composition").innerHTML='';var divcontent="";var obj = eval('(' + data + ')');//alert(obj.data.pageno);console.log(obj);divcontent+="<table border='1' borderColor='#ccc' style='width:100%;margin:0px;padding:0px;border-collapse:collapse'>";divcontent+="<tr><th width='12%' style='text-align:center;background: #79c6fa'>图片</th><th width='12%' style='text-align:center;background: #79c6fa'>绑定</th></tr>";$.each(obj.data.content, function(i,item){ console.log(item);divcontent+="<tr><td style='text-align:center'><img style='width: 100px;height:50px;margin-top:8px;' src='"+item.img+"' /></td><td style='text-align:center'><input type='radio' class='button6'  id='id' name='compositionid' value="+item.id+" /></td></tr>";});divcontent+="</table>";divcontent+='<div class="pageinfo">';divcontent+='共<span>'+obj.data.totalpages+'</span>页，每页<span>'+obj.data.pagesize+'</span>条，当前是第<span>'+obj.data.pageno+'</span>页';divcontent+='</div>';divcontent+='<div class="pagebar">';divcontent+='<button οnclick="getComposition(1);"';if(obj.data.pageno==1){divcontent+='class="button3"  disabled';}else if(obj.data.pageno>1){divcontent+=' class="button2";'}divcontent+='>首页</button>';divcontent+='<button οnclick="getComposition('+(obj.data.pageno-1) +');"';if(obj.data.pageno==1){divcontent+='class="button3"  disabled';}else if(obj.data.pageno>1){divcontent+=' class="button2";'}divcontent+='>上页</button>';divcontent+='<button οnclick="getComposition('+(obj.data.pageno+1) +');"';if(obj.data.pageno==obj.data.totalpages){divcontent+='class="button3"  disabled';}else if(obj.data.pageno<obj.data.totalpages){divcontent+=' class="button2";'}divcontent+='>下页</button>';divcontent+='<button οnclick="getComposition('+obj.data.totalpages +');"';if(obj.data.pageno==obj.data.totalpages){divcontent+='class="button3"  disabled';}else if(obj.data.pageno<obj.data.totalpages){divcontent+=' class="button2";'}divcontent+='>末页</button>';divcontent+='</div>'; document.getElementById("composition").innerHTML=divcontent;}});
}
</script>

【html部分】