Les tables de données à l'aide de réponse JSON

Je suis en train de charger une réponse JSON à partir de Google Shopping dans un tableau en html formaté à l'aide de tables de données, le plugin JQuery.

Je suis en ajoutant les données de la table, div, mais il ne semble pas fonctionner.

    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Currency</th>
                <th>Price</th>
                <th>Shipping</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Currency</th>
                <th>Price</th>
                <th>Shipping</th>
            </tr>
        </tfoot>
    </table>

    <script>

        var apiKey = "key";
        var country = "US";
        var apiurl = "https://www.googleapis.com/shopping/search/v1/public/products?callback=?";


        $(document).ready(function() { 

          $('#example').dataTable();

            $('.button').click(function (e) {
            $('#example').empty();
        e.preventDefault();

        $.ajax({
        type: "GET",
        url: apiurl,
        dataType: 'jsonp',
            data : 
        {
           key: apiKey, 
               country: country, 
               q: $('[name=myanswer]').val()    
            },
            success: function(data) {
            $.each(data.items, function(i, item){
            if (item.product.images.length > 0) //sanity check
            {
                //global variables
                var link = item.product.images[0]['link'];
                var title = item.product.title;
                var gtin = item.product.gtins[0];

                //price
                var currency = item.product.inventories[0]['currency'];
                var price = item.product.inventories[0]['price'];
                var shipping = item.product.inventories[0]['shipping'];

                var listData = "<li>" + title + gtin + price + currency + shipping + "</li>" + '<img title="' + title + '" src="' + link + '" />';

                var dataTable =
                "<tr>" +
                    "<td>" + '<img title="' + title + '" src="' + link + '" />' + "</td>" +
                    "<td>" + gtin + "</td>" +
                    "<td>" + title + "</td>" +
                    "<td>" + currency + "</td>" +
                    "<td>" + price + "</td>" +
                    "<td>" + shipping + "</td>" +
                    "</tr>";

                        $('#example').append(dataTable).hide().fadeIn('slow');
                        console.log(data)
   }
   });

   }
   });
   });
   });

Mise à jour: Avec Larry aide, j'ai réussi à obtenir le chargement des données dans la table. Je sais ce que le nombre du bas est rempli. Cependant, les données ne s'affiche pas du tout.

<!DOCTYPE html>
<html>
<head>
<style>
#images { padding:0; margin:0; overflow: hidden;}
#images img { width:200px; height:200px; border:none;}
td {
padding-top: 2px;
padding-bottom: 2px;
padding-right: 20px;
}
#example img { width:50px; height: 50px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.dataTables.js"></script>
</head>
<body>
<form id="myform">
<input type="text" name="myanswer" value="test">
<input type='submit' class="button" name="submitButton" value='submit'>
</form>
<table id="example">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
<script>
var apiKey = "key";
var country = "US";
var apiurl = "https://www.googleapis.com/shopping/search/v1/public/products?callback=?";
$(document).ready(function() { 
$('#example').dataTable();
$('.button').click(function (e) {
$('#example').empty();
e.preventDefault();
$.ajax({
type: "GET",
url: apiurl,
dataType: 'jsonp',
data : 
{
key: apiKey, 
country: country, 
q: $('[name=myanswer]').val()   
},
success: function(data) {
$.each(data.items, function(i, item){
if (item.product.images.length > 0) //sanity check
{
//global variables
var link = item.product.images[0]['link'];
var title = item.product.title;
var gtin = item.product.gtins[0];
//price
var currency = item.product.inventories[0]['currency'];
var price = item.product.inventories[0]['price'];
var shipping = item.product.inventories[0]['shipping'];
$('#example').dataTable().fnAddData( [
title,
gtin,
price
]);
}
});
}
});
});
});
</script>
</body>
</html>
Avez-vous des erreurs JS?
Il est fixé. J'ai oublié de supprimer le vide de la méthode qui a forcé la table pour montrer que vide

OriginalL'auteur jcrowson | 2011-10-11

  1. 3

    En supposant que votre appel AJAX est travail et le renvoi de données, la bonne façon d'ajouter une ligne à un jQuery datatables est de ne pas essayer de modifier le HTML sous-jacent, mais plutôt d'avoir dataTable ajouter la ligne par le biais de la dataTable appel d'API fnAddData().

    Il y a un exemple ici.

    Larry, merci. Je suis en tirant les données à partir de Google Shopping API, donc où puis-je mettre de la méthode?
    Vous devez apporter les modifications suivantes: (1) vous n'avez pas besoin de formater les données comme une ligne de la table (dataTable le fera pour vous), afin de supprimer tout le code et (2) de remplacer l'appel à $('#example').append(dataTable).hide().fadeIn('slow'); avec un appel à $('#example').dataTable.fnAddData() avec des arguments comme montré dans l'exemple, j'ai lié.
    Larry, merci. J'ai édité mon code, mais maintenant j'ai cette erreur: Uncaught TypeError: Cannot read property 'asSorting' undefined $.fn.dataTablejquery.dataTables.js:7365 c.prolonger.eachjquery.min.js:30 c.fn.c.eachjquery.min.js:24 $.fn.dataTablejquery.dataTables.js:6923 (fonction anonyme)google-exemple.php:90 c.prolonger.eachjquery.min.js:30 $.ajax.successgoogle-exemple.php:75 bjquery.min.js:124 c.prolonger.ajax.Un.(fonction anonyme)de jquery.min.js:125 (fonction anonyme)
    Avez-vous correctement construit le tableau dans le document de prêt de la fonction? Vous aurez besoin d'une table de base avec un en-tête de section pour recevoir les données que vous publiez, et il devra être "initialisé", comme avec un appel précédent .dataTable().
    Larry, j'ai mis à jour mon code, veuillez jeter un oeil. Vraiment reconnaissant de votre aide. Maintenant, les données ne s'affiche pas du tout, mais c'est d'être chargés dans la table.

    OriginalL'auteur Larry Lustig