如何解决数据表未填充来自 RestAPI 调用的数据
尝试将我的 api 读回数据表时,我收到错误“无法读取未定义的属性‘长度’”
我的表如下:
<div class="container-fluid d-flex flex-column min-vh-100 justify-content-center align-items-center">
<div class=" row d-flex justify-content-center ">
<!-- Table -->
<table id="movieTable" class="table table-striped">
<thead>
<tr>
<th>Title</th>
<th>Year</th>
</tr>
</thead>
<tbody id="list-list">
</tbody>
</table>
</div>
</div>
我的脚本如下:
<script>
$('#movieTable').DataTable({
"ajax": "http://kmoffett07.lampt.eeecs.qub.ac.uk/serverSide/buildapi.PHP?id=1",dataSrc: "","columns": [
{
"data": "Title"
},{
"data": "Year"
},]
});
</script>
我看不出我做错了什么,感谢您的帮助!
编辑,根据给出的建议,我将脚本编辑为以下内容:
<script>
$('#movieTable').dataTable({
ajax: {
url: "http://kmoffett07.lampt.eeecs.qub.ac.uk/serverSide/buildapi.PHP?id=2",dataSrc: "tv_shows","columns": [
{
"Title": "Title"
},{
"Year": "Year"
},]
},});
</script>
我的 JSON 响应如下:
{
"status": "true","message": "Customer Details","tv_shows": {
"id": "456","Title": "Vampire Knight","Year": "2008","Age": "16+","IMDb": "7.5","RottenTomatoes": "","Netflix": "1","Hulu": "1","Prime": "0","disney": "0"
}
}
我认为我的 api 可能有问题,我已将其设置为根据查询的 ID 返回值。如果我不添加 ?id='x' 我的响应如下:
{
"status": "false","message": "No customer(s) found!"
}
用于构建我的 api 的代码是:
//return JSON by id
if (isset($_GET['id']) && $_GET['id']!="") {
$id = $_GET['id'];
$query = "SELECT * FROM tv_shows WHERE id={$id}";
$result = MysqLi_query($conn,$query);
$row = MysqLi_fetch_array($result,MysqLI_ASSOC);
$tableData['id'] = $row['id'];
$tableData['Title'] = $row['Title'];
$tableData['Year'] = $row['Year'];
$tableData['Age'] = $row['Age'];
$tableData['IMDb'] = $row['IMDb'];
$tableData['RottenTomatoes'] = $row['RottenTomatoes'];
$tableData['Netflix'] = $row['Netflix'];
$tableData['Hulu'] = $row['Hulu'];
$tableData['Prime'] = $row['Prime'];
$tableData['disney'] = $row['disney'];
$response["status"] = "true";
$response["message"] = "Customer Details";
$response["tv_shows"] = $tableData;
} else {
$response["status"] = "false";
$response["message"] = "No customer(s) found!";
}
echo json_encode($response); exit;
JSon 响应如下:
{
"data": [
{
"Title": "Breaking Bad","Age": "18+","IMDb": "9.5","Rotten Tomatoes": "96%","Hulu": "0","disney": "0"
},{
"Title": "Stranger Things","Year": "2016","IMDb": "8.8","Rotten Tomatoes": "93%",
数据表脚本是:
<script>
$('#movieTable').DataTable({
"processing": true,"serverSide": true,"sPaginationType": "full_numbers","order": [],"ajax": {
"url": "http://kmoffett07.lampt.eeecs.qub.ac.uk/serverSide/buildapi2.PHP","type": 'get',"dataType": 'json'
},"columns": [
{ "data": "Title" },{ "data": "Year" },]
});
</script>
数据表中仍然没有数据!
解决方法
感谢@andrewjames 的帮助!
我不得不更改我的 api 以输出一组对象而不是一个对象,并确保 JSON 输出与数据表文档中定义的输出相匹配。
工作JS代码:
<script>
$(document).ready(function() {
$('#movieTable').DataTable( {
"ajax": {
"url": "http://kmoffett07.lampt.eeecs.qub.ac.uk/serverSide/buildapi2.php","dataSrc": "data"
},"columns": [
{ "data": "id" },{ "data": "Title" },{ "data": "Year" },{ "data": "Age" },{ "data": "IMDb" },{ "data": "Rotten Tomatoes" },]
} );
} );
</script>
HTML 表格结构:
<div class="container-fluid d-flex flex-column min-vh-100 justify-content-center align-items-center">
<div class=" row d-flex justify-content-center ">
<!-- Table -->
<table id="movieTable" class="display" style="width:100%">
<thead>
<tr>
<th>id</th>
<th>Title</th>
<th>Year</th>
<th>Age</th>
<th>IMDb</th>
<th>Rotten Tomatoes</th>
</tr>
</thead>
</table>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。