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

问题描述

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

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 正在返回错误 Uncaught TypeError: Cannot read property 'length' of undefined.

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 并重试.或者你可以用你喜欢的任何方式命名它，但是你需要在数据表初始化中添加 sAjaxDataProp 参数(假设你将它命名为 data 你会这样做:

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屋！