jQuery 数据表解析 json 不正确答案

【问题标题】：jQuery datatables parsing json incorrectlyjQuery 数据表解析 json 不正确
【发布时间】：2012-10-02 10:17:57
【问题描述】：

我只是在尝试使用以下 json 对象进行查询的数据表示例...

[{"firstName":"pom",
"lastName":"sdfpom",
"email":null,
"password":"cfe9a43acec0a35f903bc2d646ce8e58b5ef6b67",
"username":"Dave",
 "access":null,
"id":1},
{"firstName":"FirstName",
"lastName":"LastName",
"email":null,
"password":"8d60258ef3ae1b8eae67e9298f15edf5c6e05dfe",
"username":"Username",
"access":null,
"id":2}]

这是在下面的变量数据中返回的...

<script>
$(document).ready(function() {
    $.getJSON('userManagement/getAllUsers', function(data) {
            $('#table').dataTable( {
                "sAjaxSource": data
        });
    });
});

    </script>
    <table id="table">
        <thead>
            <tr>
                <th>firstName</th>
                <th>lastName</th>
                <th>email</th>
                <th>password</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
                <td>etc</td>
            </tr>
            <tr>
                <td>Row 2 Data 1</td>
                <td>Row 2 Data 2</td>
                <td>etc</td>
            </tr>
        </tbody>
    </table>

现在 JSON 似乎是有效的，当我用它做任何其他事情时，例如在 jquery 中使用它时它工作正常，但数据表根本无法正确呈现。我使用的 javascript 有问题吗？

【问题讨论】：

标签： jquery json datatables

【解决方案1】：

默认情况下，DataTables 将为其数据源处理数组数组：当它必须处理对象数组（如您的情况）时，还有一个额外的步骤。它在插件文档中的this example 中有描述。基本上，您要做的就是添加“列”属性的描述（作为数组）：

$('#table').dataTable({
  "aaData": data,
  "aoColumns": [
    { "mData": "firstName" },
    { "mData": "lastName" },
    { "mData": "email" },
    { "mData": "password" },
    { "mData": "username" },
    { "mData": "access" },
    { "mData": "id" }
  ]
});

这里有fiddle 来玩。

【讨论】：

这确实显示了表格，但是除了我在 html 中添加的行之外，它是空的，当我删除这些 JSON 数据时，它不会填充表格。你还有其他建议吗？感谢您的反馈:)
更新了答案：当你使用 JS 结构时，你需要使用'aaData' 键； sAjaxSource 用于给出返回源 JSON 的 URL。
感谢你的小提琴，我设法返回data = JSON.Parse(result.d); return data; 这是新的dataTables，它不再使用aoColumns，但仍然在几个小时后解决了胡闹！

【解决方案2】：

你的 json 是一个 object inside 一个数组..

所以不是这个

"sAjaxSource": data

试试这个

"sAjaxSource": data[0]

【讨论】：

这只是显示 html 中的数据 - 当我完全删除 tBody 数据时，它只显示标题。没有显示我的 JSON 数据。不过感谢您的反馈:)

【解决方案3】：

$.ajax( {
          "dataType": 'json',
          "type": "POST",
          "url": sSource,
          "data": aoData,
          contentType: "application/json; charset=utf-8",
          async : false,
          success: function (json) { 
            fnCallback(json);
          },
          complete: function (msg,a,b) {
            console.log('complete :'+msg) 
          },
          error : function(msg,a,b) {
            console.log('error:'+msg);
          }
        } );

async : false 非常重要。这将导致在正确绑定 json 数据之前不呈现页面。

这对我有用。

【讨论】：

【解决方案4】：

首先检查您的 json 是否有效或不使用 www.jsonlint.com。

第二次尝试用 aaData 封装您的 JSON 对象，例如：

{"aaData" :[{"firstName":"pom","lastName":"sdfpom","email":null,
"password":"cfe9a43acec0a35f903bc2d646ce8e58b5ef6b67",
"username":"Dave","access":null,"id":1},
{"firstName":"FirstName","lastName":"LastName","email":null,
"password":"8d60258ef3ae1b8eae67e9298f15edf5c6e05dfe",
"username":"Username","access":null,"id":2}] 
}

【讨论】：

是的，JSON 是有效的，我无法添加到 JSON，因为它是使用 SpringMVC 从 Jackson 生成的，因此从对象到 JSON 表示的转换是无缝的。
监听生成的json是否和你上面给出的一样，就会报错。
这只是stackoverflow代码标签的线条渲染，我会格式化它，但它确实会生成有效的JSON