I try to use jQuery DataTables but I get the error
TypeError: c is undefined
I don't know what is wrong with my code as I can see the JSON correctly retrieve and is in the correct format too but I don't know what is wrong with it that I get the above error.
My JSON :
{"Data":[{"LOGIN":10184},{"LOGIN":10214},{"LOGIN":10180},{"LOGIN":10187},{"LOGIN":10179},{"LOGIN":10280},{"LOGIN":201},{"LOGIN":10238},{"LOGIN":10296},{"LOGIN":10312}]}
and my DataTables code:
$(document).ready(function() {
$('#tablename').dataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"type": "POST",
"url": "https://test.com/api/db/select",
"data": function ( json ) { return JSON.stringify( { "Sql": 12 } );},
"contentType": "application/json; charset=utf-8",
"dataType": "json",
"processData": true,
beforeSend : function(xhr){
var access_token = sessionStorage.getItem('access_token');
xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);
}
},
"dataSrc": "Data",
"columns": [
{ "data": "LOGIN" }
]
} );
} );
dataSrc
is a special dataTables ajax option, that should be included inside the ajax object :
"ajax": {
"dataSrc": "Data", //<--- place dataSrc here instead
"type": "POST",
...
}
You have placed it outside ajax, and by that dataTables have no idea what source to use (besides blindly trying the ajax response) or where LOGIN
belongs.
Check whether you have added
<thead></thead>
<tbody></tbody>
I've resolved this problem by adding those.
So basically the structure must be like:
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Sometime, This type issue arrives by fixing mismatched / unequal columns with HTML and datatables columns.
"columns": [
null,
null,
null,
{"orderable": false, "width":"2%"},
],
Above javascript defined 4 columns and HTML having 5 columns
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
Hence you will have to fix / equal both side HTMl and Datatable configuration.
"columns": [
null,
null,
null,
null, //Added New
{"orderable": false, "width":"2%"},
],
in my case, i had to remove colspan attribute from a th inside thead and get rid of the error ;(
In my case, I got the same error because I used the ajax.dataSrc( data ) function to manipulate the data. But after that i forgot to return the data.
"dataSrc": function ( json ) {
for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
//somethings...
}
return json.data;// I forgot this line, then i got the error "TypeError: c is undefined"
}
After a few minutes, I checked the documentation of the ajax.dataSrc function and I noticed that I did not have the return:
Returns: array. Array of data that DataTables is to use to draw the table
I hope you do not have the same distraction...
In my case, missing aaData in sever side return result.
//Javascript
$('#table').DataTable({
sAjaxSource: '/load',
aoColumns: [
...
],
});
//server side(in Rails)
render json: {'aaData'=>data}
In my case, my front-end: ajax: { dataSrc: "data" }
was OK, but on server-side I returned object where first letter was Upper return Json(new { Data = model });
Another day, another solution - this time caused by a style sheet!
After spending hours reducing a gigantic web page to the raw charts code, I found that this error shows (for pie charts) when CSS rules for fonts in the stylesheet contain the calc
function.
In our style sheet, this line of code:
html {
font-size: calc(12px + 5%);
}
...broke the chart. We needed this because our webfont wasn't resizing smoothly and needed a size slightly larger than 12px but smaller than 13px, and this trick forced a better resize.
Overwriting the style rule on the chart widget directly solved the issue:
html {
font-size: calc(12px + 5%);
}
.widget {
font-size: 12px /* Replace the above rule */;
}
var GoogleChart1 = new google.visualization.PieChart(document.getElementById('Chart1'));
<div id="Chart1" class="widget"></div>
In my case th and td , count is not equal due do colspan, removed colspan and it worked.
©2020 All rights reserved.