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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!