使用ajax加载jQuery DataTable

Question

我正在尝试(并且失败)使用内置的ajax源参数加载jQuery DataTable.但是,数据表显示消息"正在加载...",其中应显示行.

这是我的数据表调用:

    $('#my-table').dataTable( 
             {bFilter: false,
              bInfo: false,
              bJQueryUI: true,
              bPaginate: false,
              bStateSave: false,
              bSort: false,
              aoColumns: [ {"sTitle" : "Date"}, 
                           {"sTitle" : "Our Co."}, 
                           {"sTitle" : "Their Co."}, 
                           {"sTitle" : "Note"} ], 
              sAjaxSource: "/contact/company_name/"} );

使用Chrome,我可以看到正在进行的调用/contact/company_name/,返回状态200,并具有以下数据:( [[[Hello], [Goodbye], [Test1], [Test2]]]这是我的测试数据).

我还可以看到dataTables.min.js正在返回错误Uncaught TypeError: Cannot read property 'length' of undefined.

我假设我的返回数据格式不正确.有谁能建议解决方案？

Answer 1

根据网站, 您的服务应该以这种格式返回数据:

{
  "aaData": [
    [
      "row 1 col 1 data",
      "row 1 col 2 data",
      "row 1 col 3 data",
      "row 1 col 4 data"
    ],
    [
      "row 2 col 1 data",
      "row 2 col 2 data",
      "row 2 col 3 data",
      "row 2 col 4 data"
    ],
    [
      "row 3 col 1 data",
      "row 3 col 2 data",
      "row 3 col 3 data",
      "row 3 col 4 data"
    ],
    [
      "row 4 col 1 data",
      "row 4 col 2 data",
      "row 4 col 3 data",
      "row 4 col 4 data"
    ]
  ]
}

所以,将数组包装在一个对象中,将数组命名为,aaData然后重试.或者你可以按照自己喜欢的方式命名,但是你需要sAjaxDataProp在datatables初始化中添加参数(比如你说它data你会这样命名:

$('#example').dataTable( {
    "bProcessing": true,
    "sAjaxSource": "/ajaxsource/callmydata",
    "sAjaxDataProp": "data"
} );

Answer 2

如果您的ajax源返回

[[[Hello], [Goodbye], [Test1], [Test2]]]

这对于数据表来说并不合适.它应该是:

{
     iTotalRecords: "54",
     iTotalDisplayRecords: "22",
     aaData: "[['Hello', 'Goodbye', 'Test1', 'Test2']]"
}

aaData代表数组数组.