使用DataTables显示JSON对象 [英] Display JSON object using DataTables
本文介绍了使用DataTables显示JSON对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用DataTables显示JSON结果，但是最后得到的是空白表.当我查看浏览器控制台日志时，可以看到对象数组正在传递给显示功能，但是此后什么也没发生.
I'm trying to display JSON results using DataTables, however I get blank table in the end. When I check browser console logs, I can see array of objects is being passed to display function but after that, nothing happens.
HTML部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="functions.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"></script>
<div class="container">
<form>
<div class="form-group row">
<label for="foodLabel" class="col-sm-2 col-form-label">Search For Food Label</label>
<div class="col-sm-10">
<input class="form-control" type="search" id="foodLabel">
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" type="submit" id="submit" onclick="getFormData(); return false;">Submit</button>
</div>
</div>
</form>
</div>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
</table>
</body>
</html>
JS部分:
function getFormData(){
var foodLabel=document.getElementById('foodLabel').value;
document.getElementById('foodLabel').value = "";
var searchURL = buildSearchURL(foodLabel);
console.log(searchURL);
$.getJSON(searchURL, function(data){
//console.log(data);
//console.log(data.list.item);
display(data.list.item);
});
}
function buildSearchURL(label){
var searchURL = "http://api.nal.usda.gov/ndb/search/?format=json&q=" + label + "&sort=n&max=25&offset=0&api_key=DEMO_KEY";
return searchURL;
}
function display(data){
console.log(data);
$(document).ready(function() {
$('#example').DataTable( {
"json": data,
"columns": [
{"item": "name"}
]
} );
} );
}
在这里我想必一定很明显.
It must be something completely obvious that I'm missing here.
我设法弄清楚了这一点，显然，Datatables库对此进行了调用，因此我更改了显示功能:
I managed to figure this one out, apparently, Datatables library makes a call on it's, so I changed my display function:
function display(searchURL){
//console.log(data);
$(document).ready(function() {
$('#example').DataTable( {
ajax: {
url: searchURL,
dataSrc: 'list.item'
},
columns: [
{data: "name"}
]
} );
} );
}
推荐答案
您无法在显示功能中访问变量searchURL，请尝试以下操作:
You can not access the variable searchURL in display function, try this:
function display(searchURL){
//console.log(data);
$(document).ready(function() {
$('#example').DataTable( {
ajax: {
url:buildSearchURL(document.getElementById('foodLabel').value),
dataSrc: 'list.item'
},
columns: [
{data: "name"}
]
} );
} );
}
这篇关于使用DataTables显示JSON对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
