Datatables TypeError: c is undefined

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" }
        ]
    } );
} );

Answers:

Answer

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.

Answer

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>
Answer

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%"},
    ],
Answer

in my case, i had to remove colspan attribute from a th inside thead and get rid of the error ;(

Answer

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...

Answer

In my case, missing aaData in sever side return result.

//Javascript
$('#table').DataTable({
        sAjaxSource: '/load',
        aoColumns: [
         ...
        ],
});
//server side(in Rails)
render json: {'aaData'=>data}
Answer

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 });

Answer

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:

CSS

html {
  font-size: calc(12px + 5%);
}
.widget {
   font-size: 12px /* Replace the above rule */;
}

JS

var GoogleChart1 = new google.visualization.PieChart(document.getElementById('Chart1'));

HTML

<div id="Chart1" class="widget"></div>
Answer

In my case th and td , count is not equal due do colspan, removed colspan and it worked.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.