[解決済み] DataTables: 未定義のプロパティ 'length' を読み取ることができません。

質問

私はこれが人気のある問題であると理解しており、ここ Stack Overflow や他のサイト (datatables ウェブサイトを含む) で同様の質問をすべて読みました。

明確にするために、私は

• PHPのCodeigniter
• Materliazecss

JSON配列を正しく受け取ったことも確認しました。

[{"name_en":"hello","phone":"55555555"},{"name_en":"hi","phone":"00000000"}]

私のHTMLテーブルはこのような感じです。

<table id="customer_table">
     <thead>
         <tr>
            <th>Name</th>
            <th>Phone</th>
         </tr>
     </thead>
</table>

そして、これが私の document.ready 関数です。

  $(document).ready(function(){
            //$('#customer_table').DataTable();
            $('#customer_table').DataTable( {
                "ajax": 'json',
                "dataSrc": "",
                 "columns": [
                    { "data": "email" },
                    { "data": "name_en" }
                ]
            });
  });

私が得ているエラーは

Uncaught TypeError: 未定義のプロパティ 'length' を読み取ることができません。

どのように解決するのですか？

原因

このエラーは TypeError: Cannot read property 'length' of undefined は、通常、jQuery DataTablesがAjaxリクエストのレスポンスにデータを見つけることができないことを意味します。

デフォルトでは、jQuery DataTablesはデータが以下に示すフォーマットのいずれかであることを期待します。デフォルト以外のフォーマットでデータが返されたため、エラーが発生します。

配列の配列

{ 
   "data": [
      [
         "Tiger Nixon",
         "System Architect",
         "$320,800",
         "2011/04/25",
         "Edinburgh",
         "5421"
      ]
   ]
}

オブジェクトの配列

{ 
   "data": [
      {
         "name": "Tiger Nixon",
         "position": "System Architect",
         "salary": "$320,800",
         "start_date": "2011/04/25",
         "office": "Edinburgh",
         "extn": "5421"
      }
   ]
}

解決方法

デフォルトの書式を使用するか ajax.dataSrc オプションを使用して、Ajax レスポンスにテーブルデータを含むデータプロパティを定義することもできます ( data である)。

参照 データ配列の位置 を参照してください。

リンク

参照 jQuery DataTablesをご覧ください。よくあるJavaScriptのコンソールエラー を参照してください。