DataTables: Невозможно прочитать свойство 'length' undefined

Question

Так что я знаю, что это популярная проблема, и я прочитал все подобные вопросы здесь, на Stackoverflow и других сайтах (включая сайт datatables).

Для уточнения я использую

• PHP CodeIgniter
• Materliazecss

Я также проверил и убедился, что мне удалось получить массив JSON правильно следующим образом: (Вы можете проверьте также на http://www.jsoneditoronline.org/)

[{"name_en":"hello","phone":"55555555","email":"a.shouman","facebook":"https:\/\/www.facebook.com"},{"name_en":"Mahfouz","phone":"00000000","email":"m.mahfouz","facebook":null},{"name_en":"Abdelrahman","phone":"55555555","email":"a.shouman","facebook":"https:\/\/www.facebook.com"},{"name_en":"ayman test","phone":"55554444","email":"a.shouman","facebook":"https:\/\/www.facebook.com"},{"name_en":"Abdelrahman Mossad Shouman Bootstrap","phone":"12345678","email":"a.shouman@mail.com","facebook":"https:\/\/www.facebook.com"},{"name_en":"Abdelrahman Mossad Shouman Bootstrap","phone":"12345678","email":"a.shouman@mail.com","facebook":"https:\/\/www.facebook.co"},{"name_en":"a.sharara","phone":"00000000","email":"a.sharara","facebook":""}] 

Итак, мой h TML Таблица выглядит следующим образом

<table id="customer_table"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Contact</th> 
      <th>Email</th> 
      <th>Facebook</th> 
     </tr> 
    </thead> 
</table> 

И вот моя document.ready функция

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

Ошибка я получаю это

Uncaught TypeError: Cannot read property 'length' of undefined 

Answer 1

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

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

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

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

Answer 2

Если у вас есть данные в формате JSON, то следующее сообщение об ошибке

Лучшее решение для ssign a 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" 
         }] 
      }); 
     }); 

Answer 3

Это даже проще: Жюст использовать dataSrc:'' опцию в АЯКС Defintion так DataTable не ожидают объект, но массив:

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

Посмотреть ajax options

Answer 4

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