我无法将这个 JSON 数据放入 DataTables

Question

所以，情况是这样的。有一个带有表格的 HTML 页面，它使用了DataTables 插件。我必须在表格中显示我从 jQuery POST 调用中收到的数据，但我似乎总是遇到错误并且迷失了如何去做。

POST 调用的响应如下所示：

[{"idoperatore":10,"nome_cognome":"Daniele Torrini","tariffa_esterno":"50.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":11,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"DT"},{"idoperatore":12,"nome_cognome":"Irene Cavalletto","tariffa_esterno":"75.00","tariffa_interno":"45.00","tariffa_viaggio":"30.00","idtariffa_esterno":9,"idtariffa_interno":15,"idtariffa_viaggio":13,"attivo":1,"rs":1,"iniziali":"IC"},{"idoperatore":14,"nome_cognome":"Sandra Moschetti","tariffa_esterno":"50.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":11,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"SM"},{"idoperatore":15,"nome_cognome":"Federica Coucourde","tariffa_esterno":"90.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":8,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"FC"},{"idoperatore":16,"nome_cognome":"Matteo Belgero","tariffa_esterno":"75.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":9,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"MB"},{"idoperatore":17,"nome_cognome":"Luca Belgero","tariffa_esterno":"90.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":8,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"LB"},{"idoperatore":18,"nome_cognome":"Federico Bottoni","tariffa_esterno":"50.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":11,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"FB"},{"idoperatore":19,"nome_cognome":"Giuseppe Pantaleo","tariffa_esterno":"60.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":10,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"GP"},{"idoperatore":20,"nome_cognome":"Matteo Ferrario","tariffa_esterno":"90.00","tariffa_interno":"75.00","tariffa_viaggio":"30.00","idtariffa_esterno":8,"idtariffa_interno":9,"idtariffa_viaggio":13,"attivo":1,"rs":1,"iniziali":"MF"},{"idoperatore":21,"nome_cognome":"Alessandro Mazzeranghi","tariffa_esterno":"100.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":7,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"AM"}]

我无法修改调用，我必须处理它。我只能访问包含来自回调的响应的变量，但是如果需要，我可以转换或修改该数据。

这是 HTML 表格的样子：

<table class="display nowrap" id="table_operatori">
  <thead>
    <tr>
      <th>
        <span></span>
      </th>
      <th class="mdl-data-table__cell--non-numeric">Nome e Cognome</th>
      <th>Tariffa Esterno</th>
      <th>Tariffa Interno</th>
      <th>Tariffa Viaggio</th>
      <th>Attivo?</th>
      <th>RS?</th>
      <th class="mdl-data-table__cell--non-numeric">Iniziali</th>
    </tr>
  </thead>
  <tbody id="table_operatori_tbody">
  </tbody>
</table>

表中的列数与 JSON 中的字段数不同，因为 JSON 中以“id”开头的字段必须是隐藏值，并且之前用作 HTML 元素的属性，以便在稍后的时刻。这也是空表头的原因：表格实际上之前是用纯HTML填充的，并且前面有一个复选框可以选择行，像这样：

data.forEach(function (element) {
    element["attivo"] == "1" ? element["attivo"] = "Si" : element["attivo"] = "No";
    element["rs"] == "1" ? element["rs"] = "Si" : element["rs"] = "No";

    var i = element['idoperatore'];
    var tableRow = '<tr><td><label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="table_operatori_checkbox_row[' + i + ']"><input type="checkbox" id="table_operatori_checkbox_row[' + i + ']" class="mdl-checkbox__input" onClick="fOperatore_Checkbox_SelectUnique(' + i + ')" /></label></td>'
    tableRow += '<td class="mdl-data-table__cell--non-numeric" id="table_operatori_nomecognome_row[' + i + ']">' + element['nome_cognome'] + '</td>';
    tableRow += '<td id="table_operatori_tariffaesterno_row[' + i + ']" idtariffa="' + element["idtariffa_esterno"] + '">' + element['tariffa_esterno'] + '</td>';
    tableRow += '<td id="table_operatori_tariffainterno_row[' + i + ']" idtariffa="' + element["idtariffa_interno"] + '">' + element['tariffa_interno'] + '</td>';
    tableRow += '<td id="table_operatori_tariffaviaggio_row[' + i + ']" idtariffa="' + element["idtariffa_viaggio"] + '">' + element['tariffa_viaggio'] + '</td>';
    tableRow += '<td id="table_operatori_attivo_row[' + i + ']">' + element['attivo'] + '</td>';
    tableRow += '<td id="table_operatori_rs_row[' + i + ']">' + element['rs'] + '</td>';
    tableRow += '<td class="mdl-data-table__cell--non-numeric" id="table_operatori_iniziali_row[' + i + ']">' + element['iniziali'] + '</td></tr>';

    $("#table_operatori_tbody").append(tableRow);

这工作，从某种意义上说，（除了非常丑陋之外）意味着表格形成了，您可以选择我们想要的行并在以后对这些行进行操作。但是您无法对表中的任何行进行排序或使用搜索过滤。
不过，如果这意味着让 DataTable 工作，我愿意维护丑陋的 HTML 构建，因为使用 .row.add() 您可以添加一个元素，我也尝试过，将 .append(tableRow) 更改为： .DataTable().row.add($.parseHTML(tableRow)); 这也不起作用，并给出了同样的错误。不过也显示在桌子上：Displays object picture

在初始化的那一刻，我没有数据可以放入表中。该表必须初始化为空，并且稍后添加响应中的行。我试过（“数据”是包含服务器响应的变量）：

$("#table_operatori").DataTable().rows.add(data);

这会删除很多丑陋的 HTML 构建，但它会给出错误：

DataTables 警告：table id=table_operatori - 请求第 0 行第 1 列的未知参数“1”。有关此错误的更多信息，请参阅http://datatables.net/tn/4

因此，通过查看该技术说明链接，它说可能是表头中的列比表体中的列多，所以我在定义表时完全匹配了我得到的字段，认为如果可行的话，我最终可能能够隐藏我不需要的列。

    $("#table_offerte").DataTable({
      paging: false,
      info: false,
      columns: [
        { title: "idoperatore" },
        { title: "nome_cognome" },
        { title: "tariffa_esterno" },
        { title: "tariffa_interno" },
        { title: "tariffa_viaggio" },
        { title: "idtariffa_esterno" },
        { title: "idtariffa_interno" },
        { title: "idtariffa_viaggio" },
        { title: "attivo" },
        { title: "rs" },
        { title: "iniziali" }
      ]
    });

但它仍然给出同样的错误。如果我将表结构与 DataTable 初始化相匹配，它也会这样做：

      columns: [
        { title: "idoperatore" },
        { title: "nome_cognome" },
        { title: "tariffa_esterno" },
        { title: "tariffa_interno" },
        { title: "tariffa_viaggio" },
        { title: "attivo" },
        { title: "rs" },
        { title: "iniziali" }
      ]

DataTables 的文档还说它在查看 JSON 数据时会查看 data: 属性，并且您必须通过在 dataSrc 属性中设置一个空字符串来指定它是否不是对象而是数组：

DataTable({ ajax: { url: "something.json", dataSrc: "" } });

问题是它需要 url: 属性请求的数据，我不能这样做，因为我只有包含 JSON 的“数据”变量。

我还应该提到，通过维护旧的 HTML 构建并将其附加到表格主体中，可以使表格正常工作并正确显示内容，like this，但是当然，一旦您尝试对任何内容进行排序或过滤，它一切都消失了，因为 DataTable 里面实际上没有行，只有 HTML 有。 我不知道如何在那里获取这些数据。我希望我能清楚地解释一切，否则请随时提出任何问题，我会尽力澄清。
提前感谢您的帮助。

Answer 1

文档有点混乱，因为设置表格的方法有很多，而且几乎是一个人（Allan Jardine）编写插件并记录它。

首先，您不需要任何表格标题。将您的 HTML 更改为：

 <table class="display nowrap" id="table_operatori"></table>

如果您想将 id 或类添加到 tbody 标记，那么您也需要添加它们。但首先，这就是您需要的所有 HTML。

这里令人困惑的是，Allan 的许多示例都包含硬编码到 HTML 中的数据，没有 JSON 或 AJAX 或任何涉及的内容。当您这样做时，您确实需要设置 HTML 标题、所有单元格以及其他所有内容。看看他的一个例子中的 HTML（例如this one），自己看看。然后，当他继续处理 JSON 示例时，他会提取数据，但会将标头留在其中。再说一次，您可以将它们放入，但 没有到。

相反，如果您从 JSON 中提取数据，您可以使用 HTML th 标记指定标题，也可以使用 columns（或 colDefs）选项来指定。你不需要两者都做。这在文档中并不像它可能的那样清楚，因为在大多数示例中，Allan 都做到了。

无论您以何种方式指定标题，它们都必须与 JSON 提要的列数相匹配。如果他们不这样做，您将得到某种形式的错误。此外，如果您同时使用column 和th，则它们都必须与您的JSON 字段计数相匹配，否则您将收到该错误。这就是为什么你得到你的错误。您正确匹配了 columns 定义，但在表定义中留下了一些 th 标记。解决方案是完全删除th 标签。

我假设您遗漏了一些th 标记的原因是您认为这是使列不可见的方法。由于我上面描述的原因，它不是。定义列是否可见（以及定义许多其他可能的属性，列出here）的最简单方法是在您的columns 数组中：只需将列的visible 选项设置为false。 （你也可以在类中使用th 标记并在CSS 中设置visibility:none，但这更简单。需要跟踪的更少。）

此外，列上的标题值是该列的columns 数组中title 的值。所以，你需要让它看起来像你想要的那样，而不是把你的 JSON 字段的名称放在那里。

最后，使用data 选项，您正在阅读文档的错误部分，即在运行dataTable() 时如何使用AJAX 从URL 中提取JSON。您的 POST 数据中已经有数据，因此您不需要这样做。所以，改为阅读this。看看第二个例子，它显示了一个对象数组作为数据源。从我看到的 JSON 字符串来看，你应该只需要添加一个这样的选项：

data: myPOSTResponse,

将所有这些放在一起：

$("#table_offerte").DataTable({
  paging: false,
  info: false,
  data: myPOSTResponse,
  columns: [
    { visible: false },  //this is the ID you don't want to see, no need to give it a title
    { title: "Nome e Cognome", className: "mdl-data-table__cell--non-numeric" },
    { title: "Tariffa Esterno" },
    { title: "Tariffa Interno" },
    { title: "Tariffa Viaggio" },
    { visible: false },  
    { visible: false },  
    { visible: false },  
    { title: "Attivo?" },
    { title: "RS?" },
    { title: "Iniziali", className: "mdl-data-table__cell--non-numeric" }
  ]
});

如果你还没有做其他有趣的事情，那应该会让你跑起来。 :)

编辑：正如 DocCobra 在 cmets 中提到的，您还必须在此处的字段级别指定 data: 选项，因为数组元素是对象。如果它们本身是数组，则不是。