Question

我想做什么？我创建了一个包含搜索字段和HTMLDataTable的叠加层。用户将输入搜索参数，客户端将通过AJAX调用向服务器请求数据。所有数据都通过AJAX正确返回。然后我将AJAX转换为JSON并在此叠加层中销毁/重建结果表。

什么不起作用？我执行搜索，并且我已经验证返回了序列化代码字符串。 JSON.parse正确地将返回的字符串转换为一系列JSON对象。以下是原始返回数据，其中敏感详细信息替换为临时值：

[{"id":5555,"nameLastFirst":"Shmoe, Joe","role":"owner"},
{"id":33333,"nameLastFirst":"Doe, Jane","role":"stakeholders"}]

这当然变成了两个对象，应该在我编码的结果表中正确填充两行。但是，我收到以下错误：

DataTables警告（表格ID =＆＃34; myTable＆＃34;）：请求的未知参数＆＃39; 0＆＃39;来自第0行的数据源。

错误发生后，我可以关闭浏览器警报，结果是HTML中的一组空行 DataTable等于我的JSON数组中的对象数。

现在，我想要注意，我搜索了该错误并收到了大量错误的独特原因。我按照我在搜索结果中可能找到的一切，并没有任何修复工作，许多甚至不适用于我的情况。这就是我来这里的原因。

这是我的jquery代码（userSearchResults是AJAX字符串）：

$.fn.renderTable = function () {
    var parsedUsers = JSON.parse(userSearchResults);
    $("#userSearchResultsTable").dataTable({
        "bDestroy": true,
        "bPaginate": true,
        "bFilter": false,
         dataType: "json",
        "bProcessing": true,
        "oLanguage": {"sEmptyTable": "There were no results given. Please try again with different search parameters."}, 
        "aaData": parsedUsers,
        "aocolumns": [
        {
            "mdataProp": "id",
            "sTitle": "ID",
            "sType" : "numeric",
        },
        {
            "mdataProp": "nameLastFirst",
            "sTitle": "Name",
            "sType": "string",
        },
        {
            "mdataProp": "role",
            "sTitle": "User Role",
        }
        ]
    });
};

最后，这是页面加载表。我将它作为占位符，在用户搜索结果时进行销毁和重建：

      <table id="userSearchResultsTable" style="width: 100%;">
      <thead><tr role="row">
              <th class="sorting_asc" tabindex="0" rowspan="1" colspan="1" aria-sort="ascending"             
                  aria-label="ID: Activate to sort column descending.">ID</th>
              <th class="sorting_asc" tabindex="1" rowspan="1" colspan="1" aria-
                  sort="ascending" aria-label="Name: Activate to sort column descending.">Name</th>
              <th class="sorting_asc" tabindex="2" rowspan="1" colspan="1" aria-sort="ascending" 
                  aria-label="User Role:  Activate to sort column descending.">User Role</th>
      </tr></thead>
<tbody role="alert" aria-live="polite" aria-relevant="all"></tbody>
</table>

非常感谢任何帮助。

Answer 1

尝试进行一些测试

$.fn.renderTable = function () {
    var parsedUsers = JSON.parse(userSearchResults);
    $("#userSearchResultsTable").dataTable({
        "bDestroy": true,
        "bPaginate": true,
        "bFilter": false,
        "bProcessing": true,
        "oLanguage": {"sEmptyTable": "There were no results given. Please try again with different search parameters."}, 
        "aaData": parsedUsers,
        "aocolumns": [
        {
            "mdata": "id",
        },
        {
            "mdata": "nameLastFirst",
        },
        {
            "mdata": "role",
        }]
    });
};

我使用过数据表并认为我们今天可以解决它。

Answer 2

这个问题原来是数据表是在页面加载时使用一组列创建的;说“A，B，C和D”列。

然而，当AJAX返回数据，并且数据被传递到$ .databtable构建函数时，我会破坏现有的表并重建它。但是，它仍然需要相同的列。我打算让列完全相同，但在某个地方犯了错误。

最终，它正在用“A，B，C，E”之类的东西重建表格，其中“E”应该是“D”。

JQuery表为数据源中的每个有效JSON对象插入空行

2 个答案: