jsp页面实现加载更多功能

我个人理解其实就是一个分页的功能,然后声明一个全局变量,按钮每点击一次,就把这个变量累加一次,并将这个变量作为参数传到后台用来当做页数(每页显示几条随意设定),然后将返回的数据在页面累加,

代码如下:

声明全局变量
var z=1;//面询记录初次点击次数/页数
var r=0;//初始判断面询记录是否为空
var c=0;//点击更多是否还有面询记录

//加载更多面询记录
function load_talk(){
    z=z+1;  //每点一次让z累加一次
    c=1;    //用户刚进入时防止弹出提示
    talk_div(); //调用方法   
}
 
//面询记录
function talk_div(){
    var id=$("#id").val();
    var framework_name=$("#framework_name").val();
    var user_birth=$("#user_birth").val();
    var v="";  //声明一个装载返回数据的容器
    $.post('${webRoot}/user/talk_detail',{id:id,click:z},function(data){  //将z作为参数传递
        if(data.success==true){
            if(data.attributes.order==null||data.attributes.order==""){
                if(c==1){ //没有数据时用户点击加载更多给出提示
                    tip("已经到底部啦!");
                }
            }else{
                $.each(data.attributes.order, function(index,a){
 
                    var date=new Date((a.update_date)*1000);
                                   //以下是字符串拼接,忽略不计!
                    v+="<table   class='formtableMtlist' cellpadding='0' cellspacing='1'>"
        
                        +"<tr><td class='td-valuelist' align='right'><label class='text-muted'> 用户名:</label></td>"
                        +"<td class='td-valuelist' ><label class='text-content' >"+data.attributes.user.user_name+"</label></td>"
                        +"<td class='td-valuelist' align='right'><label class='text-muted'> 真实姓名:</label></td>"
                        +"<td class='td-valuelist' ><label class='text-content' >"+data.attributes.user.real_name+"</label></td>"
                        +"<td class='td-valuelist' align='right'><label class='text-muted'> 性别:</label></td>"
                        +"<td class='td-valuelist' ><label class='text-content' >"+(data.attributes.user.user_gender == 0?'女': data.attributes.user.user_gender == 1?'男': '')+"</label></td></tr>"
                        
                        +"<tr><td class='td-valuelist' align='right'><label class='text-muted'> 组织机构:</label></td>"
                        +"<td class='td-valuelist' ><label class='text-content' ><input name='framework_name' value="+framework_name+" readonly='readonly'></label></td>"
                        +"<td class='td-valuelist' align='right'><label class='text-muted'> 出生日期:</label></td>"
                        +"<td class='td-valuelist' ><label class='text-content' >"+new Date(user_birth).format('yyyy-MM-dd',user_birth)+"</label></td>"
                        +"<td class='td-valuelist' align='right'><label class='text-muted'>面谈日期:</label></td>"
                        +"<td class='td-valuelist' ><label class='text-content' >"+new Date(date).format('yyyy-MM-dd',date)+"</label></td></tr>"
                        
                        +"<tr><td class='td-valuelist' align='right'><label class='text-muted'> 面谈记录:</label></td>"
                        +"<td class='td-valuelist' colspan=5><label class='text-content' ><textarea  class='textarea' disabled='disabled' >"+a.record+"</textarea></label></td>"
                        +"<td class='td-valuelist' align='right'><label class='text-muted'> </label></td>"
                        +"<td class='td-valuelist' ><label class='text-content' ></label></td>"
                        +"<td class='td-valuelist' align='right'><label class='text-muted'></label></td>"
                        +"<td class='td-valuelist' ><label class='text-content' ></label></td></tr>" 
                        
                        +"<tr><td class='td-valuelist' align='right'><label class='text-muted'> 图片资料:</label></td>"       //<a href="+a.image_url+" download="+a.image_url+" style='margin-left:57%;text-decoration:none'>下载</a>
                        +"<td class='td-valuelist' ><label class='text-content' ><img  id='image_url' src="+a.image_url+" /></label></td>"
                        +"<td class='td-valuelist' align='right'><label class='text-muted'> </label></td>"
                        +"<td class='td-valuelist' ><label class='text-content' ></label></td>"
                        +"<td class='td-valuelist' align='right'><label class='text-muted'></label></td>"
                        +"<td class='td-valuelist' ><label class='text-content' ></label></td></tr>" 
                        
                        +"<tr><td class='td-valuelist' align='right'><label class='text-muted'> 音频资料:</label></td>"
                        +"<td class='td-valuelist' colspan=3><label class='text-content' ><audio id='myAudio' src="+a.media_url+" controls></audio></label></td>"
                        +"<td class='td-valuelist' align='right'><label class='text-muted'> </label></td>"
                        +"<td class='td-valuelist' ><label class='text-content' ></label></td>"
                        +"<td class='td-valuelist' align='right'><label class='text-muted'></label></td>"
                        +"<td class='td-valuelist' ><label class='text-content' ></label></td></tr>"
                        
                        +"</table><br><br><br>";                   
                });
                $("#talk_div").append(v);
                r=1;
            }
        }else{
            alert(false);
        }      
    });        
}

猜你喜欢

转载自blog.csdn.net/qq_38880700/article/details/79075546