DataTables не отображает содержимое для простого примера

Вот JSON, возвращенный успешным вызовом веб-службы.

{"items":[{"version_no":"7.6.5.4"}]}

А вот мой javascript/HTML. Когда я загружаю страницу, она правильно отображает верхний и нижний колонтитулы и вызывает веб-службу. Но он не отображает номер версии, содержащийся в JSON.

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "utf-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Page 1</title>

    <link rel = "stylesheet" type = "text/css" href = "lib/bootstrap.css">
    <link rel = "stylesheet" type = "text/css" href = "lib/dataTables.bootstrap4.min.css">
    <style type = "text/css" class = "init">

    </style>
    <script type = "text/javascript" language = "javascript" src = "lib/jquery-3.3.1.js"></script>
    <script type = "text/javascript" language = "javascript" src = "lib/jquery.dataTables.min.js"></script>
    <script type = "text/javascript" language = "javascript" src = "lib/dataTables.bootstrap4.min.js"></script>
    <script type = "text/javascript" class = "init">

$(document).ready(function() {

   $('#example').DataTable( {
      "ajax": {
         cache: true,
         url: "https://<hostname>/get_version/",
         type: "GET"
      },
      "columns": [
         { "data" : "items.version_no" }
    ]
   } );
} );
    </script>

  </head>
  <body>
<p>
<table id = "example" class = "table table-striped table-bordered" style = "width:"75%">
    <thead>
        <tr>
            <th>Version</th>
        </tr>            
    </thead>
    <tfoot>
        <tr>
            <th>Version</th>
        </tr>
    </tfoot>
</table>

  </body>
</html>

Вот что показывает браузер

DataTables не отображает содержимое для простого примера

javascript jquery json ajax datatables

05.03.2019 21:43

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

По умолчанию DataTables ожидает данные, возвращаемые AJAX-вызовом, в определенном формате (массив массивов или массив объектов, где каждая запись соответствует строке таблицы, заключенной по умолчанию в свойство data/aaData).

Однако, если вам нужно переопределить это поведение, вы можете использовать свойство dataSrc опции ajax, чтобы указать на ваше свойство items:

ajax: {
   ...
   dataSrc: 'items'
}

После этого вы можете просто ссылаться на version_no в определении столбца:

columns: [{data:'version_no', title:'Version'}]

Большое спасибо, это было! Я не знаю, сколько времени мне понадобилось, чтобы понять это, очень признателен.

— 05.03.2019 22:14

05.03.2019 22:10

Другие вопросы по теме

Jquery, как выбрать элемент по обратному атрибуту имени

Jquery скрывает div, когда переключатель проверяет сброс, чтобы показать, когда браузер IE обновляется

Альтернатива использованию tabindex, позволяющая элементам получать ключевой ввод в Chrome

Почему цепочка на несколько строк работает в jquery?

Держите раскрывающееся меню открытым после перехода на другую страницу

Как прослушивать нажатия на кнопки в раскрывающемся меню Bootstrap? -Javascript

Использование плагина jquery с React и веб-пакетом

Как заставить этот код работать только на главной странице сайта WordPress?

Хотите получать все клики с помощью jQuery

SSO/Auth между разными поддоменами (с PHP)?

DataTables не отображает содержимое для простого примера

Ответы 1

Другие вопросы по теме

Похожие вопросы