javascript - jQuery DataTables - AJAX 调用正常工作，但数据未绘制成图表

Question

我正在尝试使用数据表 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 可以理解的选项。