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