javascript - 我无法将此 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填充的，前面有一个checkbox来选择行，像这样:

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) 更改为:< br/> .DataTable().row.add($.parseHTML(tableRow));这也不起作用，并给出了同样的错误。虽然还在 table 上显示了这个:Displays object picture

在初始化的时候，我没有数据可以放入表中。该表必须初始化为空，并在稍后添加响应中的行。我试过了(“数据”是包含服务器响应的变量):

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

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

DataTables warning: table id=table_operatori - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see 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 的文档还说它在 data: 属性中查看 JSON 数据，您必须通过在 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>

如果你想给 tbody 标签添加 ids 或 classes，那么你也需要添加它们。但首先，这就是您需要的全部 HTML。

这里令人困惑的是，Allan 的许多示例都包含硬编码到 HTML 中的数据，没有 JSON 或 AJAX 或任何涉及的内容。当您这样做时，您确实需要设置 HTML header 、所有单元格以及其他所有内容。看看他的其中一个示例(例如 this one)中的 HTML 并亲眼看看。然后，当他转向 JSON 示例时，他提取数据但保留 header 。同样，您可以将它们放入，但不要到。

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

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

我假设您遗漏某些 th 标记的原因是您认为这是使列不可见的方法。事实并非如此，原因我在上面已经描述过了。定义列是否可见(以及定义许多其他可能的属性，列出 here )的最简单方法是在 columns 数组中:只需设置列的 visible 选项为 false。 (您也可以将 th 标签与类一起使用，并在 CSS 中设置 visibility:none，但这更简单。跟踪更少。)

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

最后，使用 data 选项，您正在阅读文档的错误部分，它是关于如何在运行 dataTable( )。您的 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 在评论中提到的，您还必须在此处的字段级别指定 data: 选项，因为数组元素是对象。如果它们本身就是数组，那么您就不是。