使用ajax加载jQuery DataTable

Question

我正在尝试使用内置的ajax数据源参数加载jQuery DataTable，但是该数据表显示“Loading…”信息而不是应该出现的行。

以下是我的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。

我认为我的返回数据格式不正确。 有人能提供解决方案吗？

- Larry Lustig

---

[[[Hello], [Goodbye], [Test1], [Test2]]] 是由 Ajax 源返回的确切内容吗？ - bzlm

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，然后再试一次。 或者你可以用任何你喜欢的名称来命名它，但是你需要在Datatables初始化时添加sAjaxDataProp参数（比如你把它命名为data，那么你需要这样做：

)

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

- Sander

---

谢谢。实际上，我是个白痴，因为上周已经解决了这个完全相同的问题。这正是我需要的提醒。 - Larry Lustig

截止2014年10月1日，顶部的链接已损坏。 - Sablefoste

我相信这个页面链接是 this。 - Captain Hypertext

我怎样才能添加 aoColumns 呢！ - Zied R.

Answer 2

如果您的ajax源返回了这样的内容：

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

这对于数据表格来说是不可行的。应该改为以下形式：

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

aaData代表二维数组。

- Nicola Peluchetti