使用 ajax 加载 jQuery DataTable

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7629423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 00:05:02  来源:igfitidea点击:

Using ajax to load a jQuery DataTable

jquerydatatables

提问by Larry Lustig

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.

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

Here's my datatable call :

这是我的数据表调用:

    $('#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/"} );

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).

使用 Chrome,我可以看到调用/contact/company_name/正在发生,返回状态 200,并具有以下数据:([[[Hello], [Goodbye], [Test1], [Test2]]]这是我的测试数据)。

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

我还可以看到 dataTables.min.js 正在返回错误Uncaught TypeError: Cannot read property 'length' of undefined

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

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

回答by Sander

according to the websiteyour 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"
    ]
  ]
}

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

因此,将数组包装在一个对象中,将数组命名为 asaaData并重试。或者你可以用你喜欢的任何方式命名它,但是你需要sAjaxDataProp在数据表初始化中添加参数(假设你命名它data你会这样做:

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

回答by Nicola Peluchetti

If your ajax source returns

如果您的 ajax 源返回

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

This is not ok for datatables. It should be:

这不适用于数据表。它应该是:

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

aaData stands for array of arrays.

aaData 代表数组数组。