[英]How to use jQuery Datatable plugin from rest api json?
我想使用REST API和jQuery插件DataTable從https://swapi.co/api/planets/?format=json數據獲取所有json,但我的問題是,它首先加載數據,但是當我開始輸入時在Datatable提供的搜索字段中,它顯示“ 表格中沒有數據 ”。
我一直在尋找這個類似的問題,但我仍然找不到解決方案。 我試過的是
我的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);
});
}
});
})
任何形式的幫助表示贊賞。 謝謝。
如果你可以使用服務器端腳本,那么嘗試像這樣的代碼
PHP代碼ajax.php
$url = "https://swapi.co/api/planets/?page=".($_GET['start']/$_GET['length']+1);
if (isset($_GET['search']) && !empty($_GET['search'])) {
$url .= "&search=".$_GET['search']['value'];
}
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $url);
$result = json_decode(curl_exec($ch),true);
$array = array
(
"draw" => $_GET['draw'],
"recordsTotal" => $result['count'],
"recordsFiltered" => $result['count'],
"data" => $result['results'],
);
echo json_encode($array);
Jquery數據庫代碼
$('#tableSwapi').DataTable({
"processing": true,
"serverSide": true,
"sPaginationType": "full_numbers",
"order": [],
"ajax": {
"url": "ajax.php",
"type": 'get',
"dataType": 'json'
},
"columns": [
{ "data": "name" },
{ "data": "rotation_period" },
{ "data": "orbital_period" },
{ "data": "diameter" },
{ "data": "climate" },
{ "data": "gravity" },
{ "data": "terrain" },
{ "data": "surface_water" },
{ "data": "population" },
]
});
我用你的例子,它正常工作。
<!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插件的問題。 請檢查檢查要素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.