无效的 JSON 格式数据表答案

【问题标题】：Invalid JSON format Datatable无效的 JSON 格式数据表
【发布时间】：2018-12-13 05:26:46
【问题描述】：

我正在尝试实现服务器端数据表，但它会抛出 Invalid JSON format 错误。

CDN

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

HTML

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>EmployeeCode</th>
            <th>EmployeeName</th>
            <th>ManagerName</th>
            <th>DesignationName</th>
        </tr>
    </thead>
</table>

<script>
$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "/api/url",
        "columns": [
            { data: "EmployeeCode" },
            { data: "EmployeeName" },
            { data: "ManagerName" },
            { data: "DesignationName" }
        ],
    } );
} );
</script>

JSON

{
  "Results":[{"EmployeeCode": "12345"}], // This is just a sample of data
  "CurrentPage": 1,
  "PageCount": 42,
  "PageSize": 10,
  "RecordCount": 417
}

【问题讨论】：

您的JSON数据不清楚，能否更新完整的完整数据。
看起来 EmployeeCode 缺少引号 - JSON 中需要它们
@ic3b3rg 这个数据是机密的，我不能在这里发布，但我可以向你保证，数据是正确的 JSON 格式，带引号。
让我把你介绍给我的朋友jsonlint.com
@Lukman 我已经在json.parser.online.fr 上测试过这个 JSON DATA，它不会在这里抛出任何错误

标签： javascript html css json datatable

【解决方案1】：

看看 XHR/Ajax 调用返回的 JSON，问题就很清楚了。它应该只包含这样的预期数据：

[
  {'EmployeeCode':12345,EmployeeName:'abcde',...},
  {'EmployeeCode':12346,EmployeeName:'fghij',...},
  ...
]

您的 JSON 包含其他属性，并且数据嵌套在“结果”属性下。还看着documentation，我认为您需要格式化JSON以包含数据属性：

{
  "draw": 1,
  "recordsTotal": 57,
  "recordsFiltered": 57,
  "data": [
    [
      "12345",
      "John Smith",
      "Adam James",
      "Manager",
    ],
    ...
}

因此，作为一个简单的修复，使用 Ankush 在数据表配置中建议的 'dataSrc':'Results' 属性。

【讨论】：

我有大量数据无法在此处发布，这就是我发布 json 示例的原因，而 JSON 非常好。
我也是这么想的，有没有办法将JSON与Datatable进行映射？前任。 data = results
只需使用 'dataSrc' 属性

【解决方案2】：

使用dataSrc属性让datatable知道从哪里收集数据：

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "/api/url",
         "dataSrc": function (json) {
                   debugger;
          return json.data;
        },
        "columns": [
            { data: "EmployeeCode" },
            { data: "EmployeeName" },
            { data: "ManagerName" },
            { data: "DesignationName" }
        ],
    } );
} );

更多关于dataSrc的详细信息请见here。

【讨论】：

Used "dataSrc": "Results" 仍然面临同样的问题。
我已经更新了代码。现在尝试使用代码中提到的 dataSrc 并在此处设置一个断点以检查您正在接收的数据然后返回数组属性。
没有成功，我想我需要在我的 API 中进行更改