使用ajax加载jQuery DataTable

我正在尝试（并且失败）使用内置的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然后重试。 或者您可以按照自己喜欢的方式命名，但是您需要在data初始化中添加sAjaxDataProp参数（比如说您将其命名为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代表数组数组。