例如:
$.ajax({
url:"http://"+host+"/cicro/notice_front/load_page.do",
type:"post",
data:{"page":0},
dataType:"json",
async:false,
success:function(result){
$('#news_box').empty();
$('#news_box').append('<div class="news comWidth"><div class="news_top"><div class="news_top_top"><img class="news_top_left fl" src="../images/main_titles2.jpg" width="360" height="75"><p class="news_top_right fr"><img src="../images/hzhb04.png">当前位置:<a href="../cicro_fore/index.html">首页</a><img src="../images/hzhb04.png">通知公告</p></div></div><!-- 公告列表 --><div class="news_list" id="news_list"></div><div id="pageGro" class="cb"></div></div>');
var count = 1;
for(i = 0; i < result.data.length; i++){
var s = result.data[i];
var content = s.content;
var title = s.title;
var createtime = s.createtime.substring(0, 19);
var p=s.state;
if(p==1){
var str="未发布"
}else{
str="已发布";
}
$('.news_list').append('<a href="javascript:go('+s.id+');" class="title"><div class="news_content"><img src="../images/hzhb04.png">'
+title+'<i>'+createtime+'</i></div></a>');
}
var j;
var nowPage=0;//当前页
var listNum=10;//每页显数
var PagesLen;//总页数
var PageNum=4;//分页链接接数(5个)
var count=result.count;
PagesLen=Math.ceil(count/listNum);
//分页链接变换
strS='<a style="margin:0 3px;font-size:14px;padding:4px 8px;border:1px solid #999;" href="###" onclick="upPage(0)">首页</a> ' ;
var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2)
var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1
var strC="",startPage,endPage;
if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1}
else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页
else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t}
for (var i=startPage;i<=endPage;i++){
if (i==nowPage)
strC+='<a href="###" style="color:white;margin:0 3px;font-weight:700;font-size:14px;padding:4px 8px;border:1px solid #3c90d9;background-color:#3c90d9;" onclick="upPage('+i+')">'+(i+1)+'</a> '
else
strC+='<a style="font-size:14px;padding:4px 8px;border:1px solid #999;" href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '
}
strE=' <a style="margin:0 3px;font-size:14px;margin:0 3px;padding:4px 8px;border:1px solid #999;" href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a> '
strE2=nowPage+1+"/"+PagesLen+"页"+" 共"+j+"条"
document.getElementById("pageGro").innerHTML=strS+strC+strE
},
error:function(){alert("服务器异常.");}
});
优势比用DOM API创建来得简单
缺点好多:阅读性太差,可再编辑性差,而且容易出错(内容太长单引号、双引号太多容易出错);
建议每个节点名称变量,加上注释,再进行拼接,这样既不容易出错,后期修改也方便,阅读性好代码整洁号,还根据不同的业务逻辑组装不同的html。如下图:
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。