为啥 jQuery dataTables 不能解析我的 JSON？

Posted 2023-05-07

【中文标题】为啥 jQuery dataTables 不能解析我的 JSON？

【英文标题】：Why can't jQuery dataTables parse my JSON?为什么 jQuery dataTables 不能解析我的 JSON？

【发布时间】：2012-10-02 14:15:06

【问题描述】：

我正在尝试如下填充dataTable：

$("#my-datatable").dataTable( 
    "sAjaxSource" : "/someURLOnMyServer",
    "bDestroy" : true,
    "fnServerParams" : function(serverParams) 
        serverParams.push(
            
                "name" : "widget",
                "value" : token
            
        );
    
);

以及它正在填充的 html 表格：

<table id="my-datatable">
    <thead>
        <tr>
            <th>Type</th>
            <th>Value</th>
            <th>ID</th>
            <th>Fizz</th>
            <th>Buzz</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

根据 Firebug，从服务器返回的 JSON 是：

[
   
      "id":1,
      "attributeType":
         "id":1,
         "name":"test1",
         "tag":"test-type",
         "is-dog":false
      ,
      "attributeValue":
         "id":null,
         "name":"blah",
         "tag":"BLAH"
      ,
      "buzz":1,
      "fizz":"53abc"
   
]

但 Firebug 在其控制台中抛出以下 javascript 错误：

TypeError: aData is undefined
[Break On This Error]   

for ( i=0 ; i<aData.length ; i++ ) --> jquery.dataTables.js (line 2541)

谁能发现哪里出了问题？要么我没有正确设置我的dataTable 对象，要么返回的 JSON 与它试图填充的 HTML 表的“模式”不匹配。不管怎样，我迷路了。提前致谢！

【问题讨论】：

对 jQuery dataTables 了解不多，但我想知道返回的 JSON 作为数组是否可能是问题所在。

【参考方案1】：

数据表需要特定格式的结果。如果您不使用该格式，则必须声明所有内容。

$('#my-datatable').dataTable( 

    "sAjaxSource": "/url/here",


    "fnServerData": function ( sSource, aoData, fnCallback ) 
            aoData.push(  "name": "widget", "value": "token"  );

            request = $.ajax(
              "dataType": 'json', 
              "type": "GET", 
              "url": sSource, 
              "data": aoData, 
              "success": fnCallback
            );
      ,


      "aoColumns": [
             "mDataProp": "id",
             "mDataProp": "fizz",
             "mDataProp": "name",
             "mDataProp": "tag",
             "mDataProp": "tag",
             "mDataProp": "attributeValue.name",
             "mDataProp": "attributeValue.tag",
        ],

    );

这是格式：http://datatables.net/release-datatables/examples/server_side/post.html

【讨论】：

再次感谢@Aktee (+1) - 但这让我更加困惑！什么是sSource、aoData、fnCallback、aoData 和mDataProp，它们来自哪里（它们在哪里声明）？我猜测您上面的代码 sn-p 只是我的代码必须是什么样子的抽象示例，但是，我没有足够的信息来举例说明适合我的问题。您发送给我的链接以及所有 dataTables 文档也是如此。有不错的演示和 sn-ps，但没有 工作，真实世界的实际示例。

没有示例很难，这里有一个与您的数据完全一致的示例。 maktouch.net/pnongrata

@pnongrata，你有机会查看我托管的示例吗？

@pnongrata 可以吗？

对不起@Aktee 我上周就出城了。我现在正在检查 - 感谢您迄今为止的帮助和后续行动

【参考方案2】：

尝试用aaData 括起您的 JSON 对象，例如：

"aaData" : 

["id":1,"attributeType":"id":1,"name":"test1","tag":"test-type","is-dog":false,"attributeValue":"id":null,"name":"blah","tag":"BLAH","buzz":1,"fizz":"53abc"]