DataTables не отображает контент для простого примера - PullRequest
0 голосов
/ 05 марта 2019

Вот 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>

Вот что отображает браузер

Browser output

1 Ответ

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

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

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

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

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

columns: [{data:'version_no', title:'Version'}]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...