Как использовать плагин JQuery Datatable из остальных API JSON? - PullRequest
Новая
       1

Как использовать плагин JQuery Datatable из остальных API JSON?

4 голосов
/ 23 марта 2019

Я хочу получить все данные json из https://swapi.co/api/planets/?format=json, используя REST API и плагин jQuery DataTable, но моя проблема в том, что сначала он загружает данные, но когда я начинаю печатать в поле поиска, предоставленном Datatable.. там написано " Нет данных в таблице ".

Я искал эту похожую проблему, но все еще не могу найти решение.Я попробовал

Мой 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>

Мой файл сценария:

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);
            });
        }
    });
})

Любая помощь приветствуется.Спасибо.

Ответы [ 2 ]

2 голосов
/ 23 марта 2019

Если вы можете использовать серверный скрипт, попробуйте код, подобный

PHP Code 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);

Код Jatery Datatable 

$('#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" },
    ]
});
1 голос
/ 23 марта 2019

Я использовал ваш пример, и он работает правильно. 

<!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. Пожалуйста, проверьте в проверять элементы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...