jquery,ajax返回json對象,在table中顯示

1.<table id="resultTable" class="sortable" width="100%" border="1" align="center" cellPadding="0" cellSpacing="0" borderColorLight="#cccccc" borderColorDark="#ffffff">  
2.    <thead>  
3.        <tr>  
4.            <td nowrap width="16%">發送號碼</td>  
5.            <td nowrap width="16%">接收號碼</td>  
6.            <td nowrap width="17%">日誌類型</td>  
7.            <td nowrap width="17%">日誌時間</td>  
8.            <td nowrap width="17%">發送狀態</td>  
9.            <td nowrap width="17%">解釋口徑</td>  
10.        </tr>  
11.    </thead>  
12.    <tbody>  
13.        <!-- 此處顯示ajax返回數據 -->  
14.    </tbody>  
15.    <tfoot>  
16.        <!-- 此處顯示ajax返回數據 -->  
17.    </tfoot>  
18.</table>  
	<table id="resultTable" class="sortable" width="100%" border="1" align="center" cellPadding="0" cellSpacing="0" borderColorLight="#cccccc" borderColorDark="#ffffff">
		<thead>
			<tr>
				<td nowrap width="16%">發送號碼</td>
				<td nowrap width="16%">接收號碼</td>
				<td nowrap width="17%">日誌類型</td>
				<td nowrap width="17%">日誌時間</td>
				<td nowrap width="17%">發送狀態</td>
				<td nowrap width="17%">解釋口徑</td>
			</tr>
		</thead>
		<tbody>
			<!-- 此處顯示ajax返回數據 -->
		</tbody>
		<tfoot>
			<!-- 此處顯示ajax返回數據 -->
		</tfoot>
	</table>



Javascript代碼  
1.  
2.//清除Table   
3.function clearRowsSMS(){   
4.    var tableLen = document.getElementById('resultTable').rows.length;   
5.    if(tableLen > 1){   
6.        for(var i=0; i<tableLen-1; i++){   
7.            document.getElementById('resultTable').deleteRow(tableLen-i-1);   
8.        }   
9.    }   
10.}   
11.  
12.//ajax查詢短信收發記錄信息   
13.function searchSMS(){      
14.    if(validateSMS()){   
15.        $("#loadData").show();   
16.        $("#queryButton").attr({"disabled":"disabled"});   
17.        $.ajax({   
18.            url:'/xxxxAction.do?method=qrySMS',   
19.            data:{   
20.                faultCode: $("#linecode").val(),   
21.                startTime:$("#startTime").val(),   
22.                endTime:$("#endTime").val()   
23.            },   
24.            cache:false,//不要緩存結果數據,很重要!   
25.            dataType:'json',   
26.            error:function(){      
27.                $("#loadData").hide();   
28.                $("#queryButton").removeAttr("disabled");   
29.                clearRowsSMS();   
30.                alert("查詢出錯,請稍候再試!");   
31.            },      
32.            success:function(buffer){      
33.                $("#loadData").hide();   
34.                $("#queryButton").removeAttr("disabled");   
35.                clearRowsSMS();   
36.                if(buffer==undefined || buffer==""){   
37.                    $("#resultTable").find('tfoot').append("<tr><td colspan='6' align='center'>沒有查到短信收發記錄信息!</td></tr>");   
38.                }else{    
39.                    $.each(buffer, function(idx,item){   
40.                        $("#resultTable").find('tbody').append("<tr class='text-en-9pt'><td nowrap>"+item.inTelPhone+"&nbsp;</td><td nowrap>"+item.ountTelPhone+"&nbsp;</td><td nowrap>"+item.recordType+"&nbsp;</td><td nowrap>"+item.sendTime+"&nbsp;</td><td nowrap>"+item.msg+"&nbsp;</td><td nowrap>"+item.errhint+"&nbsp;</td></tr>");   
41.                    });   
42.                }                                           
43.            }      
44.       });    
45.    }      
46.}
相關文章
相關標籤/搜索