Question

我正在尝试使用Data Tables jQuery库在表中创建我的AJAX请求（JSON结构）的结果。 AJAX调用正在成功执行，但由于某种原因，表尚未创建。

HTML：

div class="table-responsive">
    <table id="myTable" class="table table-striped table-bordered table-hover" data-page-length='14'>
    </table>
</div>

JS：

$(document).ready(function() {
    $('#myTable').DataTable({
        ajax: {
            type: "GET",
            url: "http://API END POINT",
        dataSrc: "_deployments",
        success: function(response) {
            console.log(response);
            return response;
        }          
 },
 columns: [
        { data: "service_name" },
        { data: "git_organization" }
    ]
  });
});

JSON结构（"_deployments"数组中的每个对象都是我需要访问的一系列键值对，但不会使用所有这些对象：

{
"_total": 1853,
"_page_size": 10,
"_page_current": 1,
"_page_last": 186,
"_deployments": [
    {},
    {},
    {},
    {},
    {},
    {},
    {},
    {},
    {},
    {}]
  }

从我从文档中读到的内容，我通过将dataSrc的值声明为"_deployments"来指定所需数据是一个对象数组。我还尝试将名称/值对指定为{ data: "key" },...，但这也不起作用。此时，对实际问题有点困惑。

我之前尝试过在HTML表格中预定义列，以及thead和tbody，但我读到这不一定是必需的，但它没有解决问题。有什么想法吗？

Answer 1

解

jQuery DataTables需要以下其中一项才能初始化表。

table元素与thead，tbody和可选tfoot元素的正确HTML标记。有关详细信息，请参阅official documentation。

例如：

<table id="myTable" class="table table-striped table-bordered table-hover" data-page-length='14'>
   <thead>
      <tr>
         <th>Service Name</th>
         <th>Organization</th>
      </tr>
   </thead>
</table>

或者，您可以使用空的table元素，但需要为columns.title指定标题，并为每列指定columns.data的数据源。

例如：
```
columns: [
    { title: "Service Name", data: "service_name" },
    { title: "Organization", data: "git_organization" }
]
```
有关代码和演示，请参阅this example。

注意

看起来您的服务器端脚本返回分页数据，但格式与jQuery DataTables would expect不同。除了上述更改之外，您还需要更改数据格式或使用columns.dataSrc选项将数据格式转换为jQuery DataTables理解的内容。

jQuery DataTables - AJAX调用工作但数据没有被绘制

1 个答案:

解

注意