在HTML表格中显示JSON数据
在HTML表格中显示JSON数据
提问于 2013-11-11 16:28:01
我从服务器得到以下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字符串。现在，我想将此响应映射到我的表
说
我该怎么做呢?？
回答 9
Stack Overflow用户
回答已采纳
发布于 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
});Stack Overflow用户
发布于 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
});
}希望对其他人有帮助！
Stack Overflow用户
发布于 2013-11-11 17:02:06
有很多插件可以做到这一点。我通常使用数据表，它工作得很好。http://datatables.net/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19901843
复制相关文章
相似问题