table数据如何通过ajax方式加载？

来源：互联网发布：我的世界编程网站编辑：程序博客网时间：2024/05/01 14:03

首先在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

1 0