web-dev-qa-db-ja.com

ajaxを使用してjQueryDataTableをロードする

組み込みのajaxソース引数を使用してjQuery DataTableをロードしようとしています（失敗しています）。ただし、データテーブルには、行が表示されるはずの場所に「Loading ...」というメッセージが表示されます。

これが私のデータテーブルの呼び出しです：

    $('#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を返していることもわかります。

返されたデータが正しくフォーマットされていないと思います。誰かが解決策を提案できますか？

jquerydatatables
9
Larry Lustig

website によると、サービスは次の形式でデータを返す必要があります。

{
  "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という名前を付けると、次のようになります。

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

Ajaxソースが戻った場合

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

これはデータテーブルでは問題ありません。そのはず：

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

aaDataは配列の配列を表します。

6
Nicola Peluchetti