web-dev-qa-db-ja.com

DataTables：未定義のプロパティ 'length'を読み取れません

これはよくある問題であることを理解しており、Stack Overflowや他のサイト（データテーブルWebサイトを含む）で同様の質問をすべて読みました。

明確にするために、私は使用しています

  • PHP Codeigniter
  • 材料

また、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" }
                ]
            });
  });

私が得ているエラーは

不明なTypeError：未定義のプロパティ 'length'を読み取れません

jqueryjsoncodeigniterdatatableshtml-table
54
Abdel-Rahman Shoman

原因

このエラー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コンソールエラー を参照してください。

14
Gyrocode.com

さらに簡単です：ajax定義でdataSrc:''オプションを使用するだけで、dataTableはオブジェクトではなく配列を予期するようになります。

    $('#pos-table2').DataTable({
                  processing: true,
                  serverSide: true,
                  ajax:{url:"pos.json",dataSrc:""}
            }
    );

ajaxオプション を参照してください

80
tomsoft

OK、助けてくれてありがとう。

しかし、問題はそれよりずっと簡単でした。

次のように、JSONを修正して配列をdataという属性に割り当てるようにするだけです。

{
  "data": [{
    "name_en": "hello",
    "phone": "55555555",
    "email": "a.shouman",
    "facebook": "https:\/\/www.facebook.com"
  }, ...]
}
38
Abdel-Rahman Shoman

次のようにして、戻り値はd.dataではなくdでなければなりません。

 ajax: {
      "url": "xx/xxx/xxx",
      "type": "GET",
      "error": function (e) {
      },
      "dataSrc": function (d) {
         return d
      }
      },
13
Nisal Edu

関数としてajaxを使用している場合は、パラメーターを設定してJSONデータが返されることを期待していることを忘れないでください。

$('#example').dataTable({
    "ajax" : function (data, callback, settings) {
        callback({
            data: [...],
            recordsTotal: 40,
            recordsFiltered: 40}
            ));
    }
})
2
gvivetapl

JSONデータがある場合、次のエラーが表示されます enter image description here

より良い解決策は、ローカルJSONオブジェクトにvar dataを割り当てることです。詳細は以下を参照してください。 https://datatables.net/manual/tech-notes/4

これは、テーブルの内容を表示するのに役立ちます。

 $(document).ready(function(){   

        $('#customer_table').DataTable( {
         "aaData": data,

           "aoColumns": [{
                            "mDataProp": "name_en"
                        }, {
                            "mDataProp": "phone"
                        }, {
                            "mDataProp": "email"
                        }, {
                            "mDataProp": "facebook"
                        }]
            });
        });
1
chetan

上記の回答は状況をよく説明していますが、問題のトラブルシューティングを行う際には、ブラウザー本当にがDataTablesが期待する形式を取得することも確認してください。 dataを取得しない理由は他にもあります。たとえば、ユーザーがデータURLにアクセスできず、代わりにHTMLを取得した場合。または、リモートシステムに不幸な「修正」があります。ブラウザのデバッグツールの[ネットワーク]タブが役立ちます。

0
Roman Susi

私の場合、DatatablesのようにaaDataという属性にjsonを割り当てる必要がありました ajax examplethis 。

0
Haris ur Rehman