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

前端之家收集整理的这篇文章主要介绍了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

猜你在找的Ajax相关文章