如何使用rest api json中的jQuery Datatable插件？

Question

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 ". 我想使用REST API和jQuery插件DataTable从https://swapi.co/api/planets/?format=json数据获取所有json，但我的问题是，它首先加载数据，但是当我开始输入时在Datatable提供的搜索字段中，它显示“ 表格中没有数据 ”。

I've been searching this similiar problem, but I still can't find the solution. 我一直在寻找这个类似的问题，但我仍然找不到解决方案。 What I have tried is 我试过的是

My HTML file: 我的HTML文件：

rest.html rest.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>

My script file: 我的脚本文件：

script.js 的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);
            });
        }
    });
})

Any kind of help is appreciated. 任何形式的帮助表示赞赏。 Thank you. 谢谢。

Answer 1

If you can use server side script then try the code like 如果你可以使用服务器端脚本，那么尝试像这样的代码

PHP Code ajax.php 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 Datatable Code 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" },
    ]
});

Answer 2

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>

Maybe a problem with Datatable plugin. 可能是Datatable插件的问题。 Please check in inspect elements. 请检查检查要素。

如何使用rest api json中的jQuery Datatable插件？

问题描述

rest.html rest.html

script.js 的script.js

2 个解决方案

解决方案1
2 2019-03-23 12:15:05

解决方案2
1 已采纳 2019-03-23 11:09:13

如何使用rest api json中的jQuery Datatable插件？

问题描述

rest.html rest.html

script.js 的script.js

2 个解决方案

解决方案1 2 2019-03-23 12:15:05

解决方案2 1 已采纳 2019-03-23 11:09:13

解决方案1
2 2019-03-23 12:15:05

解决方案2
1 已采纳 2019-03-23 11:09:13