如何从Rest API JSON使用jQuery Datatable插件? [英] How to use jQuery Datatable plugin from rest api json?
问题描述
我想从 https://swapi.co/api/获取所有json使用REST API&的planets/?format = json 数据jQuery插件DataTable，但我的问题是，它首先会加载数据，但是当我开始在Datatable提供的搜索字段中输入内容时.它说"表中没有数据".
I want to get all the json from https://swapi.co/api/planets/?format=json data using REST API & jQuery plugin DataTable, but my problem is, it loads the data at first, but when I start typing in the search field provided by Datatable .. it says "No data available in table".
我一直在搜索类似的问题，但仍然找不到解决方案.我尝试过的是
I've been searching this similiar problem, but I still can't find the solution. What I have tried is
我的HTML文件:
<table id="tableSwapi" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Rotation Period</th>
<th>Orbital Period</th>
<th>Diameter</th>
<th>Climate</th>
<th>Gravity</th>
<th>Terrain</th>
<th>Water Surface</th>
<th>Population</th>
</tr>
</thead>
<tbody id="list-list">
</tbody>
</table>
我的脚本文件:
$(document).ready(function () {
$("#tableSwapi").dataTable();
$.ajax({
url: 'https://swapi.co/api/planets/',
type: 'get',
dataType: 'json',
success: function (result) {
let daftar = result.results;
var html = '';
$.each(daftar, function (i, data) {
html += `<tr>
<td> ` + data.name + `</td>
<td>` + data.rotation_period + `</td>
<td>` + data.orbital_period + `</td>
<td>` + data.diameter + `</td>
<td> ` + data.climate + ` </td>
<td> ` + data.gravity + ` </td>
<td>` + data.terrain + `</td>
<td> ` + data.surface_water + `</td>
<td> ` + data.population + ` <br></td>
</tr>`;
//This is selector of my <tbody> in my table
$("#list-list").html(html);
});
}
});
})
任何帮助都将受到赞赏.谢谢.
Any kind of help is appreciated. Thank you.
推荐答案
我使用了您的示例，它运行正常.
I used your example and it's working properly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>
<body>
<table id="tableSwapi" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Rotation Period</th>
<th>Orbital Period</th>
<th>Diameter</th>
<th>Climate</th>
<th>Gravity</th>
<th>Terrain</th>
<th>Water Surface</th>
<th>Population</th>
</tr>
</thead>
<tbody id="list-list"></tbody>
</table>
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$("#tableSwapi").dataTable();
$.ajax({
url: 'https://swapi.co/api/planets/',
type: 'get',
dataType: 'json',
success: function (result) {
let daftar = result.results;
var html = '';
$.each(daftar, function (i, data) {
html += `<tr>
<td> ` + data.name + `</td>
<td>` + data.rotation_period + `</td>
<td>` + data.orbital_period + `</td>
<td>` + data.diameter + `</td>
<td> ` + data.climate + ` </td>
<td> ` + data.gravity + ` </td>
<td>` + data.terrain + `</td>
<td> ` + data.surface_water + `</td>
<td> ` + data.population + ` <br></td>
</tr>`;
//This is selector of my <tbody> in my table
$("#list-list").html(html);
});
}
});
})
</script>
</body>
</html>
Datatable插件可能有问题.请检入检查元素.
Maybe a problem with Datatable plugin. Please check in inspect elements.
这篇关于如何从Rest API JSON使用jQuery Datatable插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
