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

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 需要以下其中一项才能初始化表。

1. 带有thead、tbody 和可选tfoot 元素的table 元素的正确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>
   

2. 或者，您可以使用空的 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 可以理解的格式。