Why can't jQuery dataTables parse my JSON?

问题

I am trying to populate a dataTable as follows:

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

And the HTML table it is populating:

<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>

According to Firebug, the JSON coming back from the server is:

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

But Firebug is throwing the following JavaScript error in its console:

TypeError: aData is undefined
[Break On This Error]   

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

Can anyone spot what's going wrong? Either I'm not setting up my dataTable object correctly, or the JSON coming back doesn't match the "schema" of the HTML table it is trying to populate. Either way, I'm lost. Thanks in advance!

回答1:

Datatables requires a certain format for results. If you are not using that format, you have to declare everything.

$('#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"},
        ],

    });

This is the format: http://datatables.net/release-datatables/examples/server_side/post.html

回答2:

Try to enclose your JSON object with aaData like:

{"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"}]

}

来源：https://stackoverflow.com/questions/12847627/why-cant-jquery-datatables-parse-my-json

标签

javascript

jquery

json

datatables