Как использовать плагин jQuery Datatable из остальных API json?
Я хочу получить все json из данных https://swapi.co/api/planets/?format=json с помощью REST API и плагина jQuery DataTable, но моя проблема в том, что он сначала загружает данные, но когда я начинаю вводить текст в поле поиска, предоставленное Datatable, он говорит «Данные отсутствуют в таблице».
Я искал эту подобную проблему, но я все еще не могу найти решение. То, что я пробовал, это
Мой HTML-файл:
отдых.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>
Мой файл сценария:
script.js
$(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);
});
}
});
})
Любая помощь приветствуется. Спасибо.
Где вы инициализируете данные в своем коде?
Извините, я только что отредактировал код скрипта. ну вот.
@charlietfl хорошо, спасибо, я понял это, поэтому сначала я пошел загружать ajax, а затем я загрузил DataTable() внутри функции setTimeout(), поэтому я дал время, чтобы DataTable знал, есть ли данные строки в таблице.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я использовал ваш пример, и он работает правильно.
<!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. Пожалуйста, проверьте элементы проверки.
Поле поиска работает? Я запустил фрагмент кода, он сначала загружает данные. но когда я начал использовать поле поиска, проблема все та же, такая же, как и при нажатии на столбец сортировки.
хорошо, спасибо, я понял это, поэтому я сначала загрузил ajax, а затем я загрузил DataTable() внутри функции setTimeout(), поэтому я дал время, чтобы DataTable знал, есть ли строки данных в Таблица.
Если вы можете использовать скрипт на стороне сервера, попробуйте код, например
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" },
]
});
Да, спасибо, но я пытаюсь не использовать сценарий на стороне сервера. Как вы думаете, есть ли возможность без использования сценария на стороне сервера. Не могли бы вы снова поделиться своим ответом? Я ценю это, приятель.
Если вы знаете все об этом API, не могли бы вы сообщить мне, как вы можете получить всю запись сразу с помощью ajax. прямо сейчас он предоставляет 10 записей на запрос.
Было бы лучше вставить сами данные через API Datatable, а затем попросить его перерисовать. Если вы вставляете html самостоятельно, плагин не знает, что что-то изменилось. Он хранит состояние таблицы внутри, чтобы знать, какие строки отображать на основе сортировки, нумерации страниц, поиска и т. д.