使用ajax加载一个jQuery DataTable [英] Using ajax to load a jQuery DataTable

问题描述

我正在尝试（和失败）使用内置的ajax源参数加载jQuery DataTable。但是，datatable可以显示消息Loading ...，其中应该显示该行。

I'm trying (and failing) to load a jQuery DataTable using the built-in ajax source argument. The datatable, however, shows the message "Loading..." where the row(s) should be appearing.

这是我的数据调用：

    $('#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]]] （这是我的测试数据）。

Using Chrome, I can see that the call to /contact/company_name/ is occurring, is returning status 200, and has the following data: [[[Hello], [Goodbye], [Test1], [Test2]]] (which is my test data).

我还可以看到dataTables.min.js返回错误未捕获TypeError：无法读取未定义的属性'length'。

I can also see that the dataTables.min.js is returning the error Uncaught TypeError: Cannot read property 'length' of undefined.

我假设我的返回数据格式不正确。任何人都可以提出解决方案？

I assume that my returned data is not formatted properly. Can anyone suggest the solution?

推荐答案

根据网站
您的服务应返回以下格式的数据：

according to the website your service should return data in this format:

{
  "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 和t再来一次
或者您可以以任何您喜欢的方式命名，但是您需要在数据表初始化中添加 sAjaxDataProp 参数（例如您将其命名为数据你会这样做：

so, wrap your array in an object, name the array as aaData and try again. or you can name it any way you like, but then you need to add the sAjaxDataProp parameter in the datatables initialisation (say you name it data you would do it like this:

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

这篇关于使用ajax加载一个jQuery DataTable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！