【问题标题】：Datatables TypeError: c is undefined数据表类型错误：c 未定义
【发布时间】：2015-07-05 18:09:24
【问题描述】：

我尝试使用 jQuery DataTables 但出现错误

TypeError: c 未定义

我不知道我的代码有什么问题，因为我可以看到 JSON 正确检索并且格式也正确，但我不知道我收到上述错误有什么问题。

我的 JSON ：

{"Data":[{"LOGIN":10184},{"LOGIN":10214},{"LOGIN":10180},{"LOGIN":10187},{"LOGIN":10179},{"LOGIN":10280},{"LOGIN":201},{"LOGIN":10238},{"LOGIN":10296},{"LOGIN":10312}]}

还有我的 DataTables 代码：

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

【问题讨论】：

我假设您使用的是插件的缩小版 js，如果您使用非缩小版，您将获得更多有用的信息……您的代码中没有“c”变量。 ..

标签： javascript jquery datatables

【解决方案1】：

检查是否添加了

<thead></thead>

<tbody></tbody>

我已经通过添加这些解决了这个问题。

所以基本上结构必须是这样的：

<table>
 <thead>
  <tr>
   <th></th>
   <th></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td></td>
   <td></td>
  </tr>
 </tbody>
</table>

【讨论】：

【解决方案2】：

有时，这种类型的问题是通过使用 HTML 和数据表列修复不匹配/不相等的列来实现的。

"columns": [
        null,
        null,
        null,
        {"orderable": false, "width":"2%"},
    ],

上面的 javascript 定义了 4 列和 HTML 有 5 列

<tr>
   <td>A</td>
   <td>B</td>
   <td>C</td>
   <td>D</td>
   <td>E</td>
</tr>

因此，您必须修复/等于 HTMl 和 Datatable 配置。

"columns": [
        null,
        null,
        null,
        null, //Added New
        {"orderable": false, "width":"2%"},
    ],

【讨论】：

【解决方案3】：

dataSrc 是一个特殊的 dataTables ajax 选项，应该包含在 ajax 对象中：

"ajax": {
    "dataSrc": "Data", //<--- place dataSrc here instead
    "type": "POST",
    ...
}

您已将它放在 ajax 之外，因此 dataTables 不知道要使用什么源（除了盲目尝试 ajax 响应）或 LOGIN 所属的位置。

【讨论】：

【解决方案4】：

在我的情况下，我必须从 thead 内部的 th 中删除 colspan 属性并摆脱错误；(

【讨论】：

【解决方案5】：

在我的情况下，服务器端返回结果中缺少 aaData。

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

【讨论】：

【解决方案6】：

在我的例子中，我遇到了同样的错误，因为我使用了 ajax.dataSrc(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"
}

几分钟后，我查看了 ajax.dataSrc 函数的文档，发现没有返回：

返回：数组。 DataTables 用于绘制表格的数据数组

我希望你不会有同样的分心......

【讨论】：

【解决方案7】：

在我的情况下 th 和 td ，由于 colspan 的计数不相等，删除了 colspan 并且它起作用了。

【讨论】：

【解决方案8】：

就我而言，我的前端：ajax: { dataSrc: "data" } 还可以，但在服务器端我返回了第一个字母为大写 return Json(new { Data = model }); 的对象

【讨论】：

【解决方案9】：

改天，另一种解决方案 - 这次由样式表引起！

在花费数小时将一个巨大的网页简化为原始图表代码后，我发现当样式表中字体的 CSS 规则包含 calc 函数时，会显示此错误（对于饼图）。

在我们的样式表中，这行代码：

html {
  font-size: calc(12px + 5%);
}

...打破了图表。我们之所以需要这个，是因为我们的 webfont 调整大小不顺畅，需要一个略大于 12px 但小于 13px 的大小，而这个技巧迫使我们更好地调整大小。

在图表小部件上覆盖样式规则直接解决了问题：

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>

【讨论】：

【解决方案10】：

查看以下内容

<td></td> -- 检查计数

<th></th> -- 检查计数

检查<tbody> 和<thead> - 打开和关闭

【讨论】：

【解决方案11】：

在我的情况下，<thead> 标记中的列数与<tbody> 标记中的列数不同。

【讨论】：