Afficher les données JSON dans le tableau HTML
je reçois la chaîne JSON suivante du serveur comme réponse
[{"city":"AMBALA","cStatus":"Y"},{"city":"ASANKHURD","cStatus":"Y"},{"city":"ASSANDH","cStatus":"Y"}]
Voici mon Code 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
});
l'alerte affiche correctement la chaîne JSON. Maintenant je veux mappeler cette réponse à ma table
Comment puis-je le faire ??
6 réponses
essaye ceci:
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
});
comme alternative aux réponses que vous avez déjà, et pour d'autres qui viennent à travers ce post. J'ai récemment eu une tâche similaire et créé un petit jQuery plug in pour le faire pour moi. Son assez petit sous 3KB miniified, et a le tri, la pagination et la capacité de montrer et cacher des colonnes.
il devrait être assez facile de personnaliser en utilisant css. Plus d'informations peuvent être trouvées ici http://mrjsontable.azurewebsites.net/ et le projet est disponible pour vous de faire comme vous souhaitez avec sur github https://github.com/MatchingRadar/Mr.JsonTable
Pour faire fonctionner télécharger les fichiers et de la pop dans votre site. Suivez les instructions et vous devriez vous retrouver avec quelque chose comme:
<div id="citytable"></div>
puis dans la méthode de succès ajax vous voudrez quelque chose comme ceci
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
});
}
j'Espère que ça aide quelqu'un d'autre!
il y a beaucoup de plugins pour faire ça. J'utilise normalement des datatables, ça marche très bien. http://datatables.net/
<table id="myData">
</table>
<script type="text/javascript">
$('#search').click(function() {
alert("submit handler has fired");
$.ajax({
type: 'POST',
url: 'cityResults.htm',
data: $('#cityDetails').serialize(),
success: function(data){
$.each(data, function( index, value ) {
var row = $("<tr><td>" + value.city + "</td><td>" + value.cStatus + "</td></tr>");
$("#myData").append(row);
});
},
error: function(jqXHR, textStatus, errorThrown){
alert('error: ' + textStatus + ': ' + errorThrown);
}
});
return false;//suppress natural form submission
});
</script>
boucle les données et les ajoute à une table comme le code ci-dessus.
veuillez utiliser datatable si vous voulez obtenir le résultat de l'objet json. Datatable fonctionne également de la même manière de convertir le résultat json en format de tableau avec la possibilité de rechercher et les colonnes sortables automatiquement.
cochez ci-dessous le lien pour convertir les données JSON à la table HTML standard de la manière la plus simple et la plus rapide.
http://crunchify.com/crunchifyjsontohtml-js-json-to-html-table-converter-script/