一对多 or 多对多表结构设计 和循环显示
在impl中
@Override
public List<Map<String, Object>> mh(condition condition) {
Integer page = condition.getPage();
Integer f=(page-1)*3;
condition.setPage(f);
List<Map<String,Object>> resultList = new ArrayList<>();
List<Map<String, Object>> list = indexJob_infoMapper.mh(condition);
//查询需要的标签
for (Map<String, Object> map : list) {
Integer jid = (Integer) map.get("id");
List<Map<String,Object>> label_duos = null;
List<Map<String,Object>> comment = null;
try {
label_duos = indexLabelMapper.selectLabel_duo(jid);
comment = indexCommentMapper.commentByid(jid);
} catch (Exception e) {
e.printStackTrace();
}
Map<String, Object> map2 = new HashMap<>();
map2.put("labels",label_duos);
map2.put("job_info",map);
map2.put("comment",comment);
resultList.add(map2);
}
return resultList;
}
给页面 直接点出来就可以
注意
存的评论和多个标签都是 需要再次循环的
//中间的文章,描述
function search(page,page2){
$.ajax({
url:"indexJob_info/mh",
data:{"page":page,"page2":page2},
type:"post",
dataType:"json",
success:function (data) {
//alert(data.list[0].comment[0].uname);
//alert(data.list[1].job_info.uname);
//alert(data.list.length);
//alert(data[1].job_info.uname);
if(data.code==666){//点击加载更多 超过六条数据
alert(data.msg);
}
var h="";
for(var i=0;i<data.list.length;i++) {
h+="<!-- post -->\n" +
"\t\t\t\t\t<div class=\"post\">\n" +
"\t\t\t\t\t\t<div class=\"post__head\">\n" +
"\t\t\t\t\t\t\t<a href=\"#\" class=\"post__head-img\">\n" +
"\t\t\t\t\t\t\t\t<img src="+data.list[i].job_info.img+">\n" +
"\t\t\t\t\t\t\t</a>\n" +
"\t\t\t\t\t\t\t<div class=\"post__head-title\">\n" +
"\t\t\t\t\t\t\t\t<h5><a href=\"#\"><font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">"+data.list[i].job_info.uname+"</font></font></a></h5>\n" +
"\t\t\t\t\t\t\t\t<p><font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">"+data.list[i].job_info.createtime+"</font></font></p>\n" +
"\t\t\t\t\t\t\t</div>\n" +
"\t\t\t\t\t\t\t<div class=\"post__dropdown\">\n" +
"\t\t\t\t\t\t\t\t<a class=\"dropdown-toggle post__dropdown-btn\" href=\"#\" role=\"button\" id=\"dropdownMenu2\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n" +
"\t\t\t\t\t\t\t\t\t<i class=\"icon ion-md-more\"></i>\n" +
"\t\t\t\t\t\t\t\t</a>\n" +
"\t\t\t\t\t\t\t\t<ul class=\"dropdown-menu dropdown-menu-right post__dropdown-menu\" aria-labelledby=\"dropdownMenu2\">\n" +
"\t\t\t\t\t\t\t\t\t<li><a href=\"#\"><font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">编辑</font></font></a></li>\n" +
"\t\t\t\t\t\t\t\t\t<li><a href=\"#\"><font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">删除</font></font></a></li>\n" +
"\t\t\t\t\t\t\t\t\t<li><a href=\"#\"><font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">隐藏</font></font></a></li>\n" +
"\t\t\t\t\t\t\t\t</ul>\n" +
"\t\t\t\t\t\t\t</div>\n" +
"\t\t\t\t\t\t</div>\n" +
"\t\t\t\t\t\t<div class=\"post__wrap\">\n" +
"\t\t\t\t\t\t\t<div class=\"post__company\">\n" +
"\t\t\t\t\t\t\t\t<i class=\"icon ion-ios-briefcase\"></i>\n" +
"\t\t\t\t\t\t\t\t<span><font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">"+data.list[i].job_info.cname+"</font></font></span>\n" +
"\t\t\t\t\t\t\t</div>\n" +
"\t\t\t\t\t\t\t<div class=\"post__location\">\n" +
"\t\t\t\t\t\t\t\t<i class=\"icon ion-ios-navigate\"></i>\n" +
"\t\t\t\t\t\t\t\t<span><font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">"+data.list[i].job_info.address+"</font></font></span>\n" +
"\t\t\t\t\t\t\t</div>\n" +
"\t\t\t\t\t\t\t<div class=\"post__actions\">\n" +
"\t\t\t\t\t\t\t\t<a class=\"post__actions-btn post__actions-btn--green\" href=\"#\">\n" +
"\t\t\t\t\t\t\t\t\t<i class=\"icon ion-ios-bookmark\"></i>\n" +
"\t\t\t\t\t\t\t\t</a>\n" +
"\t\t\t\t\t\t\t\t<a class=\"post__actions-btn post__actions-btn--red\" href=\"#\">\n" +
"\t\t\t\t\t\t\t\t\t<i class=\"icon ion-ios-mail\"></i>\n" +
"\t\t\t\t\t\t\t\t</a>\n" +
"\t\t\t\t\t\t\t</div>\n" +
"\t\t\t\t\t\t</div>\n" +
"\n" +
"\t\t\t\t\t\t<h2 class=\"post__title\"><font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">"+data.list[i].job_info.title+"</font></font></h2>\n" +
"\n" +
"\t\t\t\t\t\t<div class=\"post__options\">\n" +
"\t\t\t\t\t\t\t<span><font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">"+data.list[i].job_info.cname+"</font></font></span>\n" +
"\t\t\t\t\t\t\t<p><font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">$ "+data.list[i].job_info.salary+" /小时</font></font></p>\n" +
"\t\t\t\t\t\t</div>\n" +
"\n" +
"\t\t\t\t\t\t<div class=\"post__description\">\n" +
"\t\t\t\t\t\t\t<p><font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">"+data.list[i].job_info.content+"</font></font></p>\n" +
"\t\t\t\t\t\t\t<a href=\"#\"><font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">查看更多</font></font></a>\n" +
"\t\t\t\t\t\t</div>\n" +
"\n" +
"\t\t\t\t\t\t<div class=\"post__tags\" id='label'>\n" ;
for (var j=0;j<data.list[i].labels.length;j++){
h+='\t\t\t\t\t\t\t<a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">'+data.list[i].labels[j].lname+'</font></font></a>\n';
}
h+='\t\t\t\t\t\t</div>\n' +
'\n' +
'\t\t\t\t\t\t<div class="post__stats">\n' +
'\t\t\t\t\t\t\t<div>\n' +
"\t\t\t\t\t\t\t\t<a class=\"post__likes\" href=\"#\"><i class=\"icon ion-ios-heart\"></i> <span><font style=\"vertical-align: inherit;\">" +
"<font style=\"vertical-align: inherit;\">"+data.list[i].job_info.love+"</font></font></span></a>\n" +
"\t\t\t\t\t\t\t\t<a class=\"post__comments\" data-toggle=\"collapse\" href=\"#collapse2\" role=\"button\" aria-expanded=\"true\" aria-controls=\"collapse2\"><i class=\"icon ion-ios-text\"></i> " +
"<span><font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">"+data.list[i].job_info.comCount+"</font></font></span></a>\n" +
"\t\t\t\t\t\t\t</div>\n" +
"\n" +
'\t\t\t\t\t\t\t<div class="post__views">\n' +
'\t\t\t\t\t\t\t\t<i class="icon ion-ios-eye"></i> <span id="liuyan'+data.list[i].job_info.id+'"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">'+data.list[i].job_info.visitCount+'</font></font></span>\n' +
'\t\t\t\t\t\t\t</div>\n' +
'\t\t\t\t\t\t</div>\n' +
'\n' +
'\t\t\t\t\t\t<div class="collapse show post__collapse" id="collapse2">\n' +
'\t\t\t\t\t\t\t<form action="#" class="post__form">\n' +
'\t\t\t\t\t\t\t\t<input id="infom'+data.list[i].job_info.id+'" type="text" placeholder="输入您的评论...">\n' +
'\t\t\t\t\t\t\t\t<button οnclick="liuyan('+data.list[i].job_info.id+')" type="button"><i class="icon ion-ios-paper-plane"></i></button>\n' +
'\t\t\t\t\t\t\t</form>\n' +
'\n';
for (var k=0;k<data.list[i].comment.length;k++){
h+='\t\t\t\t\t\t\t<div class="post__comment">\n' +
'\t\t\t\t\t\t\t\t<a href="#" class="post__comment-img">\n' +
'\t\t\t\t\t\t\t\t\t<img src="'+data.list[i].comment[k].img+'" alt="">\n' +
'\t\t\t\t\t\t\t\t</a>\n' +
'\t\t\t\t\t\t\t\t<div class="post__comment-title">\n' +
'\t\t\t\t\t\t\t\t\t<h5><a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">'+data.list[i].comment[k].uname+'</font></font></a></h5>\n' +
'\t\t\t\t\t\t\t\t\t<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">'+data.list[i].comment[k].createtime+'</font></font></p>\n' +
'\t\t\t\t\t\t\t\t</div>\n' +
'\n' +
'\t\t\t\t\t\t\t\t<p class="post__comment-text"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">'+data.list[i].comment[k].content+'</font></font></p>\n' +
'\t\t\t\t\t\t\t</div>\n';
}
h+='\t\t\t\t\t\t</div>\n'+
'\t\t\t\t\t</div>';
}
$("#jobShow").html(h);
},
error:function (data) {
}
});
}
我这个是 多次拼接 加分页的 在controller层 有将返回的值 存在了新的dgb中
最后的效果