I'm trying to render some data that i get with ajax into a datatable, but it seems I'm missing something, because it displays the error: TypeError: c is undefined.
I've read this post, Datatables TypeError: c is undefined, but any solution given hasn't solved my problem. Anyone have an idea that could help me? Thank you.
html code:
<table id="itinerariDetailTable" class="table table-sm table-striped table-bordered" style="font-size: x-small;">
<thead class="thead-inverse">
<tr>
<th>Id</th>
<th>Codi</th>
<th>Descripció</th>
<th>Temporada</th>
<th>Districte</th>
<th>Barri</th>
<th>C. Treball</th>
<th>G. Servei</th>
<th>T. Servei</th>
<th>Máquina</th>
<th>Corretorn</th>
<th>Torn</th>
<th>Tipus Día</th>
<th>Equips</th>
<!-- <th>Jornades</th>
<th>Cost unitari</th>
<th>T. Itinerari</th>
<th>Escenario</th> -->
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>Codi</th>
<th>Descripció</th>
<th>Temporada</th>
<th>Districte</th>
<th>Barri</th>
<th>C. Treball</th>
<th>G. Servei</th>
<th>T. Servei</th>
<th>Máquina</th>
<th>Corretorn</th>
<th>Torn</th>
<th>Tipus Día</th>
<th>Equips</th>
<!-- <th>Jornades</th>
<th>Cost unitari</th>
<th>T. Itinerari</th>
<th>Escenario</th> -->
</tr>
</tfoot>
</table>
js code:
$('#itinerariDetailTable').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
"url":'/escenaris/selectById',
"type":'GET',
"data": function(d){
d.idEscenari = $('#idEscenari').val();
}
},
"order": [[ 0, "asc" ]],
"columns": [
{ "data": "idItinerari" },
{ "data": "codiItinerari" },
{ "data": "descripcio" },
{ "data": "temporada.codiTemporada" },
{ "data": "districte" },
{ "data": "barri" },
{ "data": "centreTreball" },
{ "data": "grupServei" },
{ "data": "tractamentRecursos" },
{ "data": "maquinaCombustible" },
{ "data": "corretorn" },
{ "data": "torn" },
{ "data": "tipusDia" },
{ "data": "nombreEquips" }
/*{ "data": "frequencia" },
{"data": "resultatItinerari.costUnitari", "defaultContent": "0" },
{ "data": "tipusItinerari.codiTipusItinerari" }/*,
{ "data": "escenari.idEscenari" } */
]
});
I'm trying to render some data that i get with ajax into a datatable, but it seems I'm missing something, because it displays the error: TypeError: c is undefined.
I've read this post, Datatables TypeError: c is undefined, but any solution given hasn't solved my problem. Anyone have an idea that could help me? Thank you.
html code:
<table id="itinerariDetailTable" class="table table-sm table-striped table-bordered" style="font-size: x-small;">
<thead class="thead-inverse">
<tr>
<th>Id</th>
<th>Codi</th>
<th>Descripció</th>
<th>Temporada</th>
<th>Districte</th>
<th>Barri</th>
<th>C. Treball</th>
<th>G. Servei</th>
<th>T. Servei</th>
<th>Máquina</th>
<th>Corretorn</th>
<th>Torn</th>
<th>Tipus Día</th>
<th>Equips</th>
<!-- <th>Jornades</th>
<th>Cost unitari</th>
<th>T. Itinerari</th>
<th>Escenario</th> -->
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>Codi</th>
<th>Descripció</th>
<th>Temporada</th>
<th>Districte</th>
<th>Barri</th>
<th>C. Treball</th>
<th>G. Servei</th>
<th>T. Servei</th>
<th>Máquina</th>
<th>Corretorn</th>
<th>Torn</th>
<th>Tipus Día</th>
<th>Equips</th>
<!-- <th>Jornades</th>
<th>Cost unitari</th>
<th>T. Itinerari</th>
<th>Escenario</th> -->
</tr>
</tfoot>
</table>
js code:
$('#itinerariDetailTable').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
"url":'/escenaris/selectById',
"type":'GET',
"data": function(d){
d.idEscenari = $('#idEscenari').val();
}
},
"order": [[ 0, "asc" ]],
"columns": [
{ "data": "idItinerari" },
{ "data": "codiItinerari" },
{ "data": "descripcio" },
{ "data": "temporada.codiTemporada" },
{ "data": "districte" },
{ "data": "barri" },
{ "data": "centreTreball" },
{ "data": "grupServei" },
{ "data": "tractamentRecursos" },
{ "data": "maquinaCombustible" },
{ "data": "corretorn" },
{ "data": "torn" },
{ "data": "tipusDia" },
{ "data": "nombreEquips" }
/*{ "data": "frequencia" },
{"data": "resultatItinerari.costUnitari", "defaultContent": "0" },
{ "data": "tipusItinerari.codiTipusItinerari" }/*,
{ "data": "escenari.idEscenari" } */
]
});
- Possible duplicate of Datatables TypeError: c is undefined – Dinesh undefined Commented Jul 26, 2017 at 9:37
- Alreday read this post, but didn't solved anything. – JoanManel Commented Jul 26, 2017 at 9:46
- please provide also your html code and if possible a fiddle with the problem – MaVRoSCy Commented Jul 26, 2017 at 9:46
2 Answers
Reset to default 5It's a long time since this question has been asked, but I've seen it in several threads, so I'm gonna share my answer for future reference.
This type of error is most often (if not particularly) related to the structure of the HTML table element.
According to to the DataTables manual: 'For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header (thead) and a single body (tbody). An optional footer (tfoot) can also be used.'
The above code is missing the tbody tag, which seems to be the issue.
the way to solve is
- Number of th must be equal to number of td in the table
instead of tfoot use tbody
the format is you must required to have thead and tbody enclosed
<table>
<thead>
<tr>
<th>sn</th>
<th>name</th>
<th>address</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>Avi chhetri</th>
<th>Nepal</th>
</tr>
</tbody>
</table>