首先在jsp页面设定一个table骨架,首先把该table的display属性设置为none,这样在加载页面的时候就不会显示出来,代码如下
<table id="generatedTable" style ="border=2; display: none;">
<thead>
<tr>
<th style='width:10%;'>表头1</th>
<th style='width:15%;'>表头2</th>
<th style='width:10%;'>表头3</th>
<th style='width:10%;'>表头4</th>
<th style='width:3%;'>表头4</th>
</tr>
</thead>
<tbody>
<tr id="cloneTr">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
然后根据这个骨架用ajax来把动态生成table的各个行,并把后台数据添加到table中
ajaxPost({
type:"GET",
url:"<c:url value='/logDetails.auth'/>",
data:"datas="+datas;//要发送的数据
//object是后台传过来的java list数据集合
success:function(objects){
//1,获取上面id为cloneTr的tr元素
var tr = $("#cloneTr");
$.each(objects, function(index,item){
//克隆tr,每次遍历都可以产生新的tr
var clonedTr = tr.clone();
var _index = index;
//循环遍历cloneTr的每一个td元素,并赋值
clonedTr.children("td").each(function(inner_index){
//根据索引为每一个td赋值
switch(inner_index){
case(0):
$(this).html(_index + 1);
break;
case(1):
$(this).html(item.caller);
break;
case(2):
$(this).html(item.imsi);
break;
case(3):
$(this).html(item.imei);
break;
case(4):
$(this).html(item.osid);
break;
}//end switch
});//end children.each
//把克隆好的tr追加原来的tr后面
clonedTr.insertAfter(tr);
});//end $each
$("#cloneTr").hide();//隐藏id=clone的tr,因为该tr中的td没有数据,不隐藏起来会在生成的table第一行显示一个空行
$("#generatedTable").show();
}//end success
});//end ajaxpost