Таблицы данных: невозможно прочитать длину свойства undefined

Я понимаю, что это популярная проблема, и я прочитал все подобные вопросы здесь, на Qaru и других сайтах (включая веб-сайт 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' из неопределенного

ОТВЕТЫ

Ответ 1

ОК, спасибо всем за помощь.

Однако проблема была намного проще, чем это.

Все, что мне нужно сделать, это исправить мой JSON, чтобы присвоить массив атрибуту с именем data, как показано ниже.

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

Ответ 2

Это еще проще: просто используйте dataSrc:'' в определении ajax, чтобы dataTable знал, что следует ожидать массива вместо объекта:

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

Посмотреть параметры ajax

Ответ 3

Попробуйте следующим образом: возврат должен быть d, а не d.data

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

Ответ 4

ПРИЧИНА

Эта ошибка TypeError: Cannot read property 'length' of undefined удается 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 для получения дополнительной информации.

Ответ 5

Когда у вас есть данные JSON, появляется следующая ошибка enter image description here

Лучшим решением является назначение var data для локального объекта json array, подробности см.: 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"
                        }]
            });
        });

Ответ 6

В моем случае мне пришлось назначить my json атрибуту aaData​​strong > , как в Datatables пример ajax, данные которого выглядели this.

Ответ 7

Если вы используете ajax в качестве функции, помните, что он ожидает, что ему будут возвращены данные JSON с установленными параметрами.

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

Ответ 8

Хотя приведенные выше ответы хорошо описывают ситуацию, при устранении неполадок проверьте также, что браузер действительно получает формат, ожидаемый DataTables. Там могут быть другие причины, чтобы не получить data. Например, если пользователь не имеет доступа к URL-адресу данных, а вместо этого получает HTML-код. Или удаленная система имеет некоторые неудачные исправления на месте. Вкладка "Сеть" в браузере "Отладка" помогает.

Ответ 9

вы можете попробовать проверить свои поля, поскольку вы отображаете поле электронной почты, которое недоступно в вашем ajax

$.ajax({
  url: "url",
  type: 'GET',
  success: function(data) {
    var new_data = {
      "data": data
    };
    console.log(new_data);
  }
});