jQuery DataTables “Nessun dato disponibile nella tabella”

Ho una tabella che è fatta nella funzione $( document ).ready . Sto anche usando il plugin jQuery DataTables. Per qualche motivo, quando la pagina viene caricata, la tabella viene caricata ma la prima riga indica “Nessun dato disponibile nella tabella”.

HTML

    
  
Order Planner Vendor SKU Description Quantity PO Date PO Tracking

JS / jQuery (scripts.js)

 $ ( document ).ready(function() { $.ajax({ type: 'GET', url: 'models/summary.php', mimeType: 'json', success: function(data) { $.each(data, function(i, data) { var body = ""; body += "" + data.name + ""; body += "" + data.address + ""; body += "" + data.phone_no + ""; body += "" + data.birthday + ""; body += "" + data.color + ""; body += "" + data.car + ""; body += "" + data.hobbies + ""; body += "" + data.relatives + ""; body += ""; $( body ).appendTo( $( "tbody" ) ); }); }, error: function() { alert('Fail!'); } }); /*DataTables instantiation.*/ $( "#summary-table" ).DataTable(); } 

Errore DataTables

Inoltre, se faccio clic sulle frecce di ordinamento sulle intestazioni delle colonne, tutti i miei dati scompaiono e mi mancano solo le intestazioni delle colonne e “Nessun dato disponibile nella tabella”.

Questo problema esiste in IE, Chrome e FireFox. Ecco cosa ho provato finora:

-Ho provato a inserire $( "#summary-table" ).DataTable(); prima della mia chiamata AJAX. Non ha funzionato.

-Ho provato a sostituire $( body ).appendTo( $( "tbody" ) ); con $ (“tbody”) .append (corpo); `. Non ha funzionato.

-Sono su google. Un sacco di domande SO e altri siti che hanno questo problema hanno una soluzione relativa alla struttura di una tabella errata, ma non riesco a trovare dove la struttura della mia tabella stia andando male. Guardando in elemento inspect, ha le mie righe aggiunte, oltre a un mucchio di HTML che DataTables produce. Nessun errore nella console.

Come posso far funzionare DataTables con i miei dati attuali? Quali sono potenziali errori che sto trascurando?

Prova ad avviare il dataTable dopo che la tua tabella caricata AJAX è appesa sul corpo.

 $ ( document ).ready(function() { $.ajax({ type: 'GET', url: 'models/summary.php', mimeType: 'json', success: function(data) { $.each(data, function(i, data) { var body = ""; body += "" + data.name + ""; body += "" + data.address + ""; body += "" + data.phone_no + ""; body += "" + data.birthday + ""; body += "" + data.color + ""; body += "" + data.car + ""; body += "" + data.hobbies + ""; body += "" + data.relatives + ""; body += ""; $( "#summary-table tbody" ).append(body); }); /*DataTables instantiation.*/ $( "#summary-table" ).DataTable(); }, error: function() { alert('Fail!'); } }); }); 

Spero, questo sarebbe di aiuto!

Durante il caricamento dei dati tramite AJAX su un DataTable, è sufficiente utilizzare l’API row.add () DataTable come documentato qui .

Nella tua risposta AJAX (assumendo che tu abbia avviato un DataTable chiamato myTable):

 $.each(data, function(i, data) { myTable.row.add([data.name, data.address,...]); }); myTable.draw(); 

Trovo questo metodo più semplice perché non devo creare l’html – posso solo passare una serie di dati al metodo row.add () sul mio object DataTable.