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

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

【JavaScript部分】

1. <script>  
2. function getComposition(pageno){  
3.       
4.     //alert(pageno);   
5.     $.ajax(  
6.     {  
7.         url:'<%=basePath%>composition/compositionlist',  
8.         type:'post',  
9.         data:"pageno="+pageno,  
10.         success:function(data)  
11.         {       
12.             document.getElementById("composition").innerHTML='';  
13.             var divcontent="";  
14.             var obj = eval('(' + data + ')');  
15.               
16.             //alert(obj.data.pageno);  
17.               
18.             console.log(obj);  
19.               
20.             divcontent+="<table border='1' borderColor='#ccc' style='width:100%;margin:0px;padding:0px;border-collapse:collapse'>";  
21.             divcontent+="<tr><th width='12%' style='text-align:center;background: #79c6fa'>图片</th><th width='12%' style='text-align:center;background: #79c6fa'>绑定</th></tr>";  
22.                 
23.              $.each(obj.data.content, function(i,item)  
24.               {   
25.                  console.log(item);  
26.                  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>";  
27.                    
28.               });  
29.              divcontent+="</table>";  
30.                
31.              divcontent+='<div class="pageinfo">';  
32.              divcontent+='共<span>'+obj.data.totalpages+'</span>页，每页<span>'+obj.data.pagesize+'</span>条，当前是第<span>'+obj.data.pageno+'</span>页';  
33.              divcontent+='</div>';  
34.                
35.              divcontent+='<div class="pagebar">';  
36.                
37.                 divcontent+='<button οnclick="getComposition(1);"';  
38.                 if(obj.data.pageno==1){  
39.                     divcontent+='class="button3"  disabled';  
40.                 }else if(obj.data.pageno>1){  
41.                     divcontent+=' class="button2";'  
42.                 }  
43.                 divcontent+='>首页</button>';  
44.                   
45.                 divcontent+='<button οnclick="getComposition('+(obj.data.pageno-1) +');"';  
46.                 if(obj.data.pageno==1){  
47.                     divcontent+='class="button3"  disabled';  
48.                 }else if(obj.data.pageno>1){  
49.                     divcontent+=' class="button2";'  
50.                 }  
51.                 divcontent+='>上页</button>';  
52.                   
53.                 divcontent+='<button οnclick="getComposition('+(obj.data.pageno+1) +');"';  
54.                 if(obj.data.pageno==obj.data.totalpages){  
55.                     divcontent+='class="button3"  disabled';  
56.                 }else if(obj.data.pageno<obj.data.totalpages){  
57.                     divcontent+=' class="button2";'  
58.                 }  
59.                 divcontent+='>下页</button>';  
60.                   
61.                 divcontent+='<button οnclick="getComposition('+obj.data.totalpages +');"';  
62.                 if(obj.data.pageno==obj.data.totalpages){  
63.                     divcontent+='class="button3"  disabled';  
64.                 }else if(obj.data.pageno<obj.data.totalpages){  
65.                     divcontent+=' class="button2";'  
66.                 }  
67.                 divcontent+='>末页</button>';  
68.                   
69.              divcontent+='</div>';   
70.               
71.             document.getElementById("composition").innerHTML=divcontent;  
72.         }  
73.     });  
74. }  
75. </script>  

【html部分】

 

1. 1. <div id="composition" ></div>  

转载于:https://www.cnblogs.com/songfayuan/articles/7290420.html