DataTable con colonne dinamiche

Question

Sto cercando di rendere un DataTable con colonne dinamiche utilizzando JSON ma continuo a ricevere il seguente errore:

Uncaught TypeError: Cannot read property 'length' of undefined. 

Qualsiasi aiuto sarebbe molto apprezzato.

Grazie !!

JS:

<link href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css"/> 

<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.js" type="text/javascript"></script> 

jQuery(document).ready(function() { 
    var dataObject = '[{"COLUMNS":[{ "sTitle": "NAME"}, { "sTitle": "COUNTY"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]'; 

    var columns = []; 

    jQuery.each(dataObject.COLUMNS, function(i, value){ 
     var obj = { sTitle: value }; 
     columns.push(obj); 
    }); 

    jQuery('#example').dataTable({ 
     "bProcessing": true, 
     "bPaginate": true, 
     "sPaginationType": "full_numbers", 
     "aaData": dataObject.DATA, 
     "aoColumns": columns 
    }); 
}); 

HTML:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
    <tr><thead>column1</thead></tr> 
    <tbody></tbody> 
</table> 

Answer 1

Ciao, ci sono diversi problemi nel codice ...

• dataObject è una stringa, non un json. quindi puoi renderlo json object usando eval() o rimuovendo '
• il nome del parametro che stai trasmettendo datatable è sbagliato. è necessario fornire il parametro preciso.
• Si sta utilizzando l'oggetto padre json come matrice. ma non stai usando [] per ottenere il suo primo elemento.
• il tuo contenuto html è sbagliato. dato che stai passando il nome delle colonne usando lo script java. non hai bisogno delle intestazioni della tabella html. l'errore di lunghezza effettivamente verificatosi a causa di questo codice html. se rimuovi l'html all'interno delle tabelle, il tuo codice non avrà l'errore di lunghezza. ma ancora l'errore di cui sopra citato sarà lì. si prega di controllare il codice qui sotto. può essere siete alla ricerca di questo codice ...

jQuery(document).ready(function() { 
 
    var dataObject = eval('[{"COLUMNS":[{ "title": "NAME"}, { "title": "COUNTY"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]'); 
 
    var columns = []; 
 
    $('#example').dataTable({ 
 
     "data": dataObject[0].DATA, 
 
     "columns": dataObject[0].COLUMNS 
 
    }); 
 
});

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
 
</table>

Answer 2

tua dichiarazione di dataObject è per una stringa, non un oggetto con le proprietà "colonne" e DATA - togliere il '[all'inizio e '] alla fine in modo da avere questo (che sarà un oggetto):

var dataObject = {"COLUMNS":[{ "sTitle": "NAME"}, { "sTitle": "COUNTY"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}; 

Answer 3

Penso che la vita sarebbe stata più facile con questo

jQuery(document).ready(function() { 
 
    var dataObject = { 
 
    columns: [{ 
 
     title: "NAME" 
 
    }, { 
 
     title: "COUNTY" 
 
    }], 
 
    data: [ 
 
     ["John Doe", "Fresno"], 
 
     ["Billy", "Fresno"], 
 
     ["Tom", "Kern"], 
 
     ["King Smith", "Kings"] 
 
    ] 
 
    }; 
 
    var columns = []; 
 
    $('#example').dataTable({ 
 
    "data": dataObject.data, 
 
    "columns": dataObject.columns 
 
    }); 
 
});

<link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" /> 
 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> 
 
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">

Answer 4

Coloro che ottengono un Attenzione: Richiesto errore sconosciuto descritto a https://datatables.net/tn/4, fare controllare il formato dei dati JSON. Sotto l'esempio può aiutarti.

var dataObject = eval('[{"columns":[{ "title": "Id", "data":"Id"}, { "title": "Name", "data":"Name"}],"data":[{"Id":"123","Name":"John Doe Fresno"}, {"Id":"124","Name":"Alice Alicia"}]}]');  
$('#example').DataTable(dataObject[0]); 

demo funzionante: https://jsfiddle.net/ue6vqy77/