javascript 使用 JSON 响应的数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7726507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datatables using JSON response
提问by jcrowson
I'm trying to load a JSON response from Google Shopping into a table in html formatted using DataTables, the JQuery plugin.
我正在尝试将来自 Google Shopping 的 JSON 响应加载到使用 DataTables（JQuery 插件）格式化的 html 表格中。
I'm appending the data to the table div but it does not seem to be working.
我将数据附加到表 div 但它似乎不起作用。
<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: With Larry's help, I've managed to get the data loading into the table. I know this as the number at the bottom is populated. However, the data is not displaying at all.
更新：在 Larry 的帮助下，我设法将数据加载到表中。我知道这是因为底部的数字已填充。但是，数据根本没有显示。
<!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>
采纳答案by Larry Lustig
Assuming that your AJAX call is working and returning data, the proper way to append a row to a jQuery dataTable is not to attempt to edit the underlying HTML but rather to have dataTable add the row through the dataTable API call fnAddData().
假设您的 AJAX 调用正在工作并返回数据，将行附加到 jQuery dataTable 的正确方法不是尝试编辑底层 HTML，而是让 dataTable 通过 dataTable API 调用 fnAddData() 添加行。
There is an example here.
这里有一个例子。
