Datatables in der JSON-Antwort
Ich versuche, laden Sie eine JSON-Antwort von Google Shopping in einer Tabelle in einer html-formatierten Datentabellen, das JQuery-plugin.
Ich bin mit dem anfügen der Daten in die Tabelle ein div, aber es scheint nicht zu funktionieren.
<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)
}
});
}
});
});
});
Update: Mit Larry ' s Hilfe habe ich es geschafft, den laden von Daten in die Tabelle. Ich weiß das, als die Zahl am unteren Rand gefüllt ist. Die Daten werden jedoch überhaupt nicht angezeigt.
<!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>
Erhalten Sie irgendwelche JS Fehler?
Es ist behoben. Ich habe vergessen zu entfernen Sie die leere Methode, die Zwang die Tabelle, um zu zeigen, wie leer
Es ist behoben. Ich habe vergessen zu entfernen Sie die leere Methode, die Zwang die Tabelle, um zu zeigen, wie leer
InformationsquelleAutor jcrowson | 2011-10-11
Du musst angemeldet sein, um einen Kommentar abzugeben.
Vorausgesetzt, dass der AJAX-Aufruf zu arbeiten und die Rückgabe von Daten, die richtige Art und Weise zum Anhängen einer Zeile an eine jQuery-dataTable ist, nicht zu versuchen, Bearbeiten Sie den zugrunde liegenden HTML-Code sondern um dataTable hinzufügen der Zeile durch die dataTable-API-Aufruf fnAddData().
Es ist ein Beispiel hier.
Sie sollten die folgenden änderungen vornehmen: (1) Sie brauchen nicht zu formatieren, die Daten als eine Zeile in der Tabelle (dataTable machen das für Sie), so entfernen Sie den code und (2) ersetzen Sie den Aufruf
$('#example').append(dataTable).hide().fadeIn('slow');
mit einem Aufruf$('#example').dataTable.fnAddData()
mit den Argumenten, wie im Beispiel gezeigt-ich verknüpft.Larry, vielen Dank. Ich bearbeitete meinen code jetzt bin ich aber immer diese Fehlermeldung: Uncaught TypeError: Cannot read property 'asSorting' undefined $.fn.dataTablejquery.dataTables.js:7365 c.verlängern.eachjquery.min.js:30 c.fn.c.eachjquery.min.js:24 $.fn.dataTablejquery.dataTables.js:6923 (anonyme Funktion)google-Beispiel.php:90 c.verlängern.eachjquery.min.js:30 $.ajax.successgoogle-Beispiel.php:75 bjquery.min.js:124 c.verlängern.ajax.Ein.(anonyme Funktion)jquery.min.js:125 (anonyme Funktion)
Haben Sie ordnungsgemäß gebaut, die Tabelle in der document-ready-Funktion? Benötigen Sie eine base-Tabelle mit einem header-Abschnitt zum empfangen von Daten, die Sie posten, und es wird "initialisiert", da mit einem vorherigen Aufruf .dataTable().
Larry, ich habe aktualisiert mein code, bitte werfen Sie einen Blick. Wirklich zu schätzen Ihre Hilfe. Jetzt werden die Daten nicht angezeigt, sondern es wird in die Tabelle geladen.
InformationsquelleAutor Larry Lustig