• 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='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>
  • 相关阅读:
    MSP430:管脚的第二功能选择
    MSP430 WDT
    MSP430 G2553 Timer 中断总结
    Timer A UP mode 中断
    AD10 库下载地址
    mysql的视图,事务,索引,外键
    mariadb主从配置
    DNS服务搭建
    数据库的连接查询
    数据库设计及ER模型
  • 原文地址:https://www.cnblogs.com/songfayuan/p/5112786.html
Copyright © 2020-2023  润新知