Таблиці даних: Не вдається прочитати властивість "довжина" невизначеного

Я розумію цю популярну проблему, і я прочитав усі подібні запитання тут, на 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' з 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: Поширені помилки консолі JavaScript .

Це ще простіше: просто використовуйте dataSrc:''параметр у визначенні ajax, щоб dataTable знав, що очікує масив замість об’єкта:

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

Див. Варіанти ajax

Добре, дякую усім за допомогу.

Однак проблема була набагато простішою.

Все, що мені потрібно зробити, це зафіксувати свій JSON для присвоєння масиву атрибуту, який називається data, наступним чином.

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

Спробуйте наступним чином повернення має бути d, а не d.data

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

Якщо ви використовуєте ajax як функцію, пам’ятайте, що вона очікує повернення до неї даних JSON із заданими параметрами.

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

Коли у вас є дані JSON, з’являється така помилка

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

У моєму випадку, я повинен був призначити свій JSON на атрибут називається aaData так само , як в DataTables прикладі АЯКС , дані виглядали як це .

Це може статися, коли ім’я та ім’я властивості вашого перегляду всередині розділу стовпця таблиці даних не збігаються. Переконайтесь, що ім’я властивості та ім’я даних стовпця збігаються

Хоча наведені вище відповіді добре описують ситуацію, під час усунення несправностей також перевірте, чи справді браузер отримує формат DataTables, який очікується. Можливо, існують інші причини, щоб не отримати data. Наприклад, якщо користувач не має доступу до URL-адреси даних і замість цього отримує деякий HTML. Або у віддаленій системі є якісь невдалі «виправлення». Допомагає вкладка Мережа в інструментах налагодження браузера.

Це дійсно пізно для партії, але жодне з наведених вище рішень не спрацювало для мене. Я не хотів " Found total xxx records", тому додав info:falseдо конфігурації . Коли я видалив, що все працювало.

Слід зазначити, що перша сторінка завантажена нормально. Коли я вдарив далі, друга сторінка завантажилася, але негайно викинула вищевказану помилку консолі

Ви можете спробувати перевірити свої поля, оскільки ви відтворюєте поле електронної пошти, яке недоступне у вашому ajax

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