jQuery Girl
  1. jQuery Girl
  3. Comment append une réponse JSON d’appel REST à des tables de données jQuery?
Intereting Posts
Effet d’accélération du défilement régulier avec la molette de la souris Twitter bootstrap v2 et Jquery aucun conflit erreur javascript- non définie Galerie Fancybox avec .live () de jQuery Créer une balise DIV qui ne se recharge pas sur plusieurs pages Web JS: retourne le résultat de la fonction de réussite ajax nestede Chargement de contenu HTML contenant un script en ligne via jQuery Efface un fichier de prévisualisation d’image qui a été supprimé du tableau avec jQuery désactiver le bouton d’envoi jusqu’à ce que le fichier soit sélectionné pour le téléchargement jQuery UI Autcomplete: POST au lieu de GET Erreur history.pushState lors de l’utilisation de fancybox “Échec de l’exécution de ‘pushState’ sur ‘History’: un historique” Le rendu du texte est flou dans Firefox et Internet Explorer avec jQuery Insertion de virgules en nombres pour les objects et les champs de texte de saisie Boîte de dialog de confirmation JQuery Faire en sorte que le positionnement CSS ne soit modifié qu’une seule fois

Comment append une réponse JSON d’appel REST à des tables de données jQuery?

J’essaie d’afficher la réponse JSON d’appel REST dans les tables de données jQuery.

Vous trouverez ci-dessous la réponse JSON que je reçois. 

{ "artifact": [ { "artifactId": "I8cc4a96ef69a11e08b448cf533780ea2", "batchId": "15581", "processId": "115458787" }, { "artifactId": "e08b448cf533780ea2I8cc4a96ef69a11", "batchId": "14962", "processId": "787974254" } ] }

Le scénario: 

  $(document).ready(function () { $("#artifacts").dataTable({ "sPaginationType": "full_numbers", "bJQueryUI": true }); }); function submitForm() { $.getJSON('http://myurl.com/JerseySample/rest/search', function(data) { $.each(data.artifact, function(i,artifact){ $('#artifacts').datatable().fnAddData([ artifact.artifactId, artifact.batchId, artifact.processId ] ); }); }); }

Le HTML: 

 
   
 
 
 
  
 Artifact Id Batch Id Legacy Id

Quelqu’un peut-il fournir une réponse sur la raison pour laquelle je suis incapable de charger la réponse JSON dans datatable? Existe-t-il une meilleure approche pour obtenir cette fonctionnalité?

Vous faites tout bien, vous faites juste une erreur de recrue, et c’est facile à rater.

Quand tu fais 

 $("#artifacts").dataTable();

Vous créez une nouvelle instance datatable. Datatables renvoie l’instance d’object (avec les fonctions API) lors de cet appel, mais vous ne stockez cette instance nulle part. Par conséquent, vous perdez toute référence au datatable que vous venez de créer.

Pour résoudre ce problème, ajoutez simplement une référence au datatable que vous créez comme 

 var thisTable = $("#artifacts").dataTable( { "sPaginationType": "full_numbers", "bJQueryUI": true } );

puis référencez-le dans chaque fonction 

 $.each(data.artifact, function(i,artifact){ thisTable.fnAddData( [ artifact.artifactId, artifact.batchId, artifact.processId ] ); });

Voici un exemple JSFiddle pour le voir en action.

L’exemple d’ append dynamicment une nouvelle ligne sur datatables.net est assez médiocre, car il effectue un appel d’API en ligne sans qu’il soit nécessaire d’append une référence. Cela est mieux démontré sur leur exemple suivant sur le filtrage multiple .

Vous pouvez également en savoir plus sur la documentation de leur API .
Indice: il est démontré dans la première ligne sous $