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

Posted 2023-05-07

【中文标题】我无法将这个 JSON 数据放入 DataTables

【英文标题】：I can't manage to put this JSON data inside DataTables

【发布时间】：2018-10-01 06:43:27

【问题描述】：

所以，情况是这样的。有一个带有表格的 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 有。 我不知道如何在那里获取这些数据。我希望我能清楚地解释一切，否则请随时提出任何问题，我会尽力澄清。 提前感谢您的帮助。

【参考方案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: 选项，因为数组元素是对象。如果它们本身是数组，则不是。

【讨论】：

一个非常非常有用的答案！清晰且解释清楚，很好:-)

谢谢！你的评论肯定让我朝着正确的方向前进，我终于让它工作了！但我会指出一些事情：您的代码中有 visible, false 应该是 visible: false ，并且在尝试您的代码并查找它给出的错误之后，以及示例您已链接，我发现您还必须为每列需要从中选择数据的位置指定 data: "parameter_name" 选项。像这样：标题：“Tariffa Esterno”，数据：“tariffa_esterno”，标题：“Tariffa Interno”，数据：“tariffa_interno”

我还想指出（如果有人偶然发现这个问题），通过像 BobRodes 所说的那样设置表格并在我上面的评论中进行调整，它可以完美地与 .clear( ) 和 .rows.add(data)，具有与上面相同的 json 对象。这意味着您可以初始化，然后稍后再操作它，例如我的情况。

@DocCobra 哎呀。我将逗号固定为冒号。对此感到抱歉。当然，我也复制了几次错误。接下来，我回过头来对一些旧代码进行了更深入的挖掘，你说的完全正确。如果你有一个像这里一样的对象字面量数组，你还必须指定 data 选项。如果你有一个数组数组，你就没有。因此，如果您的 JSON 包含所有 [ 而不是 ，则您不必指定数据。对不起，我也错过了（看起来我可能需要新眼镜），但看起来我给了你足够的解决方案。