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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ajax11111/article/details/50628320

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




展开阅读全文

easyui datagrid如何加载通过ajax获得的数据??

01-13

[color=#FF0000][b]从ajax中获得了数据,然后怎么把多个json对象让datagrid加载???[/b][/color]rn[code=javascript]rn// 构建设备总览列表rn $('#dg_machine_list').datagrid(rn title : '设备列表模式',rn iconCls : 'icon-a_detail',rn fit : true,rn fitColumns : true,rn rownumbers : true,rn pagination : true,rn singleSelect : true,rn border : false,rn striped : true,rn toolbar : [ rn text : '查看详情',rn iconCls : 'icon-script_link',rn handler : function() rn viewDetail();rn rn , '-', rn iconCls : 'icon-help',rn handler : function() rn alert('帮助按钮');rn rn ],rn columns : [ [ rn field : 'unid',rn title : 'UNID',rn width : 100,rn align : 'center',rn hidden : truern , rn field : 'machine_name',rn title : '设备名称',rn width : 100,rn align : 'center'rn , rn field : 'machine_type',rn title : '设备类型',rn width : 100,rn align : 'center'rn , rn field : 'num_recoder',rn title : '备案编号',rn width : 100,rn align : 'center'rn , rn field : 'work_state',rn title : '当前状态',rn width : 100,rn align : 'center'rn , rn field : 'update_time',rn title : '更新时间',rn width : 100,rn align : 'center'rn , rn field : 'moment',rn title : '力矩(KN.m)',rn width : 70,rn align : 'center'rn , rn field : 'load',rn title : '载重(t)',rn width : 50,rn align : 'center'rn , rn field : 'height',rn title : '高度(m)',rn width : 50,rn align : 'center'rn , rn field : 'range',rn title : '幅度(m)',rn width : 50,rn align : 'center'rn , rn field : 'angle',rn title : '角度(度)',rn width : 50,rn align : 'center'rn , rn field : 'wind_speed',rn title : '风速(m/s)',rn width : 50,rn align : 'center'rn , rn field : 'dip_angle',rn title : '倾角(度)',rn width : 50,rn align : 'center'rn , rn field : 'alarm_info',rn title : '报警信息',rn width : 100,rn align : 'center'rn ] ]rn );rn // 先通过ajax获取数据,然后再传给datagridrn // https://bas.gimiscloud.com/api/crane/machinelistrn // json/data_machine_list.jsonrnrn $.ajax(rn method : 'GET',rn url : 'https://bas.gimiscloud.com/api/crane/machinelist',rn async : false,rn dataType : 'json',rn beforeSend : function(jqXHR) rn jqXHR.setRequestHeader('Authorization', 'Bearer 'rn + '3feee5b76d8e698f4e5e29c626eb9dc2');rn ,rn success : function(data) rn for ( var machine in data) rn alert(data[machine].name);rn var a = [ rn 'unid' : data[machine].unid,rn 'machine_name' : data[machine].name,rn 'machine_type' : data[machine].type,rn 'num_recoder' : data[machine].unid,rn 'work_state' : data[machine].online,rn 'update_time' : data[machine].date,rn 'moment' : data[machine].torque,rn 'load' : data[machine].capa,rn 'height' : data[machine].hook_height,rn 'range' : data[machine].radius,rn 'angle' : data[machine].angle,rn 'wind_speed' : data[machine].wind_velocity,rn 'dip_angle' : data[machine].obliquity,rn 'alarm_info' : data[machine].contentrn ];rn $('#dg_machine_list').datagrid('loadData', a);rn rn ,rn error : function() rn alert('error');rn rn );rn[/code] 论坛

没有更多推荐了,返回首页