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='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=' 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 onclick="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 onclick="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 onclick="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 onclick="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部分代码】
<div id="composition" ></div>