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中的字段以＆＃34; id＆＃34;开头。必须是隐藏的值，并且之前被用作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);

从某种意义上说，这个工作（除了非常丑陋）意味着表格的形成，你可以选择我们想要的行，然后再对它们采取行动。但是你无法对搜索中的任何行进行排序或过滤尽管如此，我仍然愿意维护丑陋的HTML构建，如果它意味着让DataTable工作，因为使用.row.add（）你可以添加一个元素，我也试过了，改变.append（tableRow）：登记/> .DataTable（）row.add（$ parseHTML（tablerow的）。）。这也没有工作，并给出了同样的错误。同样在桌面上显示：Displays object picture

在初始化时，我没有将数据放入表中。该表必须初始化为空，并且响应中的行稍后添加。我尝试过（使用＆＃34;数据＆＃34;是包含服务器响应的变量）：

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

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

DataTables警告：table id = table_operatori - 请求的未知参数＆＃39; 1＆＃39;第0行第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数据时查看数据：property属性，你必须通过在dataSrc属性中设置一个空字符串来指定它是不是对象而是数组：

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

问题是它需要url：property请求的数据，而我不能这样做，因为我只有＆＃34;数据＆＃34;包含JSON的变量。

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

Answer 1

该文档有点令人困惑，因为有很多不同的方法来设置表格，而且几乎只有一个人（Allan Jardine）编写插件并记录它。

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

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

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

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

相反，如果您从JSON中提取数据，则可以使用HTML th标记指定标题，也可以使用columns（或colDefs进行标记。）选项。你不需要同时做这两件事。从文档中可能看出这一点并不清楚，因为在大多数示例中，Allan都做到了。

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

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

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

最后，使用columns选项，您将阅读文档的错误部分，该部分是关于如何在运行data时使用AJAX从URL中提取JSON。您的POST数据中已有数据，因此您不需要这样做。因此，请阅读this。看看第二个示例，它将对象数组显示为数据源。根据我对JSON字符串的看法，您只需要添加如下选项：

dataTable()

把所有这些放在一起：

data: myPOSTResponse,

如果你还没有做其他有趣的事情，那应该让你跑步。：）

编辑：正如DocCobra在评论中提到的那样，你还必须在字段级别指定$("#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" } ] });选项，因为数组元素是对象。如果它们本身就是数组，那么你就不会。

我无法将此JSON数据放入DataTables

1 个答案: