Question

这是Web服务调用返回的JSON，它成功。

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

这是我的javascript / HTML。当我加载页面时，它会正确显示页眉和页脚，并调出Web服务。但它不会显示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>

这是浏览器显示的内容

Answer 1

默认情况下，DataTables期望从AJAX调用返回的数据以某种方式格式化（数组数组或对象数组，其中每个条目对应于表行，默认情况下包含在属性data / aaData中）。

但是，如果您需要覆盖此行为，则可以使用ajax选项的dataSrc属性指向您的items属性：

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

在那之后，您可以简单地在列定义中引用version_no：

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

一个简单的例子，数据表不显示内容

1 个答案: