我从服务器得到以下JSON字符串作为响应
[{"city":"AMBALA","cStatus":"Y"},{"city":"ASANKHURD","cStatus":"Y"},{"city":"ASSANDH","cStatus":"Y"}]
下面是我的Jquery代码
$('#search').click(function() {
alert("submit handler has fired");
$.ajax({
type: 'POST',
url: 'cityResults.htm',
data: $('#cityDetails').serialize(),
success: function(data){
alert(data);
},
error: function(jqXHR, textStatus, errorThrown){
alert('error: ' + textStatus + ': ' + errorThrown);
}
});
return false;//suppress natural form submission
});
此警报会正确显示JSON字符串。现在,我想将此响应映射到我的表
说
我该怎么做呢??
发布于 2013-11-11 16:45:19
试试这个:
CSS:
.hidden{display:none;}
HTML:
<table id="table" class="hidden">
<tr>
<th>City</th>
<th>Status</th>
</tr>
</table>
JS:
$('#search').click(function() {
$.ajax({
type: 'POST',
url: 'cityResults.htm',
data: $('#cityDetails').serialize(),
dataType:"json", //to parse string into JSON object,
success: function(data){
if(data){
var len = data.length;
var txt = "";
if(len > 0){
for(var i=0;i<len;i++){
if(data[i].city && data[i].cStatus){
txt += "<tr><td>"+data[i].city+"</td><td>"+data[i].cStatus+"</td></tr>";
}
}
if(txt != ""){
$("#table").append(txt).removeClass("hidden");
}
}
}
},
error: function(jqXHR, textStatus, errorThrown){
alert('error: ' + textStatus + ': ' + errorThrown);
}
});
return false;//suppress natural form submission
});
发布于 2014-01-30 17:33:04
作为你已经有的答案的替代,以及其他遇到这篇文章的人。我最近有一个类似的任务,并创建了一个小的jquery插件来为我做这件事。它非常小,小于3KB,并且具有排序、分页和显示和隐藏列的能力。
使用css进行自定义应该是相当容易的。更多信息可以在这里找到http://mrjsontable.azurewebsites.net/,该项目可供您在github https://github.com/MatchingRadar/Mr.JsonTable上随心所欲地操作。
要使其正常工作,请下载这些文件并将其弹出到您的站点中。按照说明操作,您应该会得到类似以下内容的结果:
<div id="citytable"></div>
然后,在ajax成功方法中,您将需要如下内容
success: function(data){
$("#citytable").mrjsontable({
tableClass: "my-table",
pageSize: 10, //you can change the page size here
columns: [
new $.fn.mrjsontablecolumn({
heading: "City",
data: "city"
}),
new $.fn.mrjsontablecolumn({
heading: "City Status",
data: "cStatus"
})
],
data: data
});
}
希望对其他人有帮助!
发布于 2013-11-11 17:02:06
有很多插件可以做到这一点。我通常使用数据表,它工作得很好。http://datatables.net/
https://stackoverflow.com/questions/19901843
复制相似问题