DataTables: Không thể đọc thuộc tính 'length' của undefined

Question

Vì vậy, tôi biết đây là một vấn đề phổ biến và tôi đã đọc tất cả các câu hỏi tương tự ở đây trên Stackoverflow và các trang web khác (bao gồm cả trang web datatables).

Để làm rõ Tôi đang sử dụng

• PHP CodeIgniter
• Materliazecss

Tôi cũng đã hai lần kiểm tra và chắc chắn rằng tôi quản lý để nhận được các mảng JSON một cách chính xác như sau: (Bạn có thể kiểm tra xem nó cũng trên 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":""}] 

Vì vậy, h TML Bảng là như sau

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

Và đây là chức năng document.ready tôi

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

Các lỗi tôi nhận được là này

Uncaught TypeError: Cannot read property 'length' of undefined 

Answer 1

OK, cảm ơn tất cả vì sự trợ giúp.

Tuy nhiên, vấn đề dễ hơn nhiều so với điều đó.

Tất cả những gì bạn cần làm là sửa JSON của tôi để gán mảng cho thuộc tính được gọi là dữ liệu, như sau.

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

Answer 2

Khi bạn có dữ liệu JSON thì báo lỗi sau xuất hiện

Giải pháp tốt hơn là ssign a var data cho đối tượng mảng json cục bộ, chi tiết xem: https://datatables.net/manual/tech-notes/4

Điều này giúp bạn hiển thị nội dung bảng.

$(document).ready(function(){ 

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

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

Answer 3

Nó thậm chí còn đơn giản hơn: Juste sử dụng dataSrc:'' tùy chọn trong defintion ajax để DataTable không mong đợi một đối tượng nhưng một mảng:

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

Xem ajax options

Answer 4

Trong trường hợp của tôi, tôi đã có để gán json của tôi cho một thuộc tính được gọi là aaData giống như trong Datatables ajax example dữ liệu nào trông giống như this.