Использование ajax для загрузки jQuery DataTable

Question

Я пытаюсь (и не могу) загрузить jQuery DataTable, используя встроенный аргумент источника ajax. Однако в таблице данных показано сообщение «Идет загрузка ...», в котором должны появиться строки.

Вот мой вызов с данными:

    $('#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

в соответствии с веб-сайтом ваш сервис должен возвращать данные в следующем формате:

{
  "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 в инициализации datatables (скажем, вы назвали его 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 обозначает массив массивов.