DataTable: impossibile leggere la proprietà 'length' di undefined

Question

Quindi so che questo è un problema popolare e ho letto tutte le domande simili qui su Stackoverflow e altri siti (incluso il sito di dati).

Per chiarire che sto usando

• PHP Codeigniter
• Materliazecss

Inoltre ho ricontrollato e fatto in modo che sono riuscito a ricevere correttamente l'array JSON come segue: (Si può controlla anche su 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":""}] 

Quindi la mia h tml Table è come seguendo

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

E qui è la mia funzione document.ready

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

L'errore che sto ottenendo è questo

Uncaught TypeError: Cannot read property 'length' of undefined 

Answer 1

OK, grazie per l'aiuto.

Tuttavia il problema era molto più facile di quello.

Tutto ciò che dovevo fare è correggere il mio JSON per assegnare l'array a un attributo chiamato data, come segue.

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

Answer 2

Quando si dispone di dati JSON quindi il seguente errore appare

Una soluzione migliore è quella di ssign a var data per l'oggetto json array locale, dettagli vedere: https://datatables.net/manual/tech-notes/4

Questo è di aiuto per visualizzare il contenuto della tabella.

$(document).ready(function(){ 

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

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

Answer 3

E 'ancora più semplice: juste usare dataSrc:'' opzione nel defintion ajax modo dataTable non aspettatevi un oggetto ma un array:

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

Vedi ajax options

Answer 4

Nel mio caso, ho avuto per assegnare il mio json a un attributo chiamato aaData proprio come in Datatables ajax example quali dati sembravano this.