Datatables TypeError: c is undefined

Question

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

I Suppose you are using the minified js of the plugin, if you use the non-minified one, you'll get more useful information... there is no "c" variable in your code... — n00dl3, Apr 27 '15 at 10:39

score 115 · Answer 1 · edited Sep 06 '17 at 22:28

115

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>

edited Sep 06 '17 at 22:28

pbarney

2,529
4
35
49

answered Oct 07 '15 at 08:12

Chinthaka Dinadasa

3,332
2
28
33

score 19 · Answer 2 · answered Jul 03 '17 at 14:39

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

score 8 · Accepted Answer · answered Apr 27 '15 at 14:13

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.

score 5 · Answer 4 · answered Feb 22 '18 at 09:58

5

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

answered Feb 22 '18 at 09:58

Qasim Ali

787
6
17

score 2 · Answer 5 · answered Apr 10 '19 at 20:28

2

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

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

answered Apr 10 '19 at 20:28

hobbydev

1,513
19
31

score 1 · Answer 6 · answered Jan 03 '17 at 22:05

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

score 1 · Answer 7 · answered Mar 31 '20 at 12:50

1

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

answered Mar 31 '20 at 12:50

Navin

636
8
19

score 0 · Answer 8 · answered Oct 09 '19 at 11:27

0

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

answered Oct 09 '19 at 11:27

Tomanek1

65
4

score 0 · Answer 9 · answered Feb 07 '20 at 11:46

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>

score 0 · Answer 10 · answered Jul 06 '21 at 14:08

0

check followings

<td></td> -- check count

<th></th> -- check count

check <tbody> and <thead> - opening and closing

answered Jul 06 '21 at 14:08

Sujiraj R

1,544
1
13
4

score 0 · Answer 11 · answered Sep 01 '21 at 12:46

0

In my case the number of column in <thead> tag is different than the number of column in <tbody> tag.

answered Sep 01 '21 at 12:46

user2267379

1,067
2
10
20

Datatables TypeError: c is undefined

11 Answers11

CSS

JS

HTML

Linked