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

根据website 您的服务应该以这种格式返回数据：

{
  "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参数（比如您将其命名为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代表数组数组。

使用ajax加载jQuery DataTable

2 个答案: