Bootstrap Datatables无法渲染服务器端数据，报Uncaught TypeError错误

问题说明 #

在MVC项目中使用DataTables时，浏览器抛出Uncaught TypeError: c is undefined错误，尝试论坛多种方案后仍未解决。

现有代码 #

HTML表格代码 #

<table class="table table-hover  table-sm table-responsive" id="table-result">
    <thead class="thead-inverse">
    <tr>
        <th>MAQUINA</th>
        <th>MODELO</th>
        <th>MOLDE</th>
        <th>SHOT</th>
        <th>FECHA</th>
        <th>CYCLE_TIME</th>
        <th>METAL_TEMPERATURE</th>
        <th>DIE_TEMPERATURE</th>
        <th>DIE_TEMPERATURE_SUP</th>
        <th>WATER_IN</th>
        <th>WATER_OUT</th>
        <th>PRESSURE_PATTERN</th>
    </tr>
 </thead>
 <tbody>
                
 </tbody>
</table>

DataTables初始化脚本 #

$('#table-result').DataTable({
      serverSide: true,
      processing: true,
      deferRender: true,
      "bPaginate": true,
      "bLengthChange": false,
      "bFilter": false,
      "bInfo": true,
      "bAutoWidth": true,
      "ordering": true,
      "bSortClasses": false,
      "bDestroy": true,
      bLengthChange: false,
      "iDisplayLength": 50,
      responsive: true,
      dom: 'Bfrtip',
      ajax: function (data, callback, s) {
           
           ajax =
              $.ajax({
              url: '@Url.Action("DataTable_Moldeo")',
              "dataSrc": "Data", //<--- place dataSrc here instead
                  type: "GET",
                  contentType: "application/json",
                  dataType: 'json',
                  data: {
                      MaquinasList: $("#MaquinasList").val(),
                      ModeloList: $("#ModeloList").val(),
                      fecha_ini: $("#fecha_ini_val").val(),
                      fecha_fin: $("#fecha_fin_val").val(),
              },
              success: function (data) {
                  data = JSON.stringify(data);
                  alert(data);
                  callback(data);
              },
                  error: function (e) {
                      // can add sweetalert or normal alert
                  }
              });
      },
      
  });

服务器返回的JSON数据 #

[
{
"MAQUINA":"AQM-901",
"MODELO":"KH5T",
"MOLDE":55,
"SHOT":11,
"FECHA":"30/08/2022",
"CYCLE_TIME":2741,
"METAL_TEMPERATURE":710,
"DIE_TEMPERATURE":999,
"DIE_TEMPERATURE_SUP":999,
"WATER_IN":230,
"WATER_OUT":460,
"PRESSURE_PATTERN":0
},
{
"MAQUINA":"AQM-901",
"MODELO":"KH5T",
"MOLDE":55,
"SHOT":11,
"FECHA":"30/08/2022",
"CYCLE_TIME":2741,
"METAL_TEMPERATURE":710,
"DIE_TEMPERATURE":999,
"DIE_TEMPERATURE_SUP":999,
"WATER_IN":230,
"WATER_OUT":460,
"PRESSURE_PATTERN":0
},
{
"MAQUINA":"AQM-901",
"MODELO":"KH5T",
"MOLDE":55,
"SHOT":11,
"FECHA":"30/08/2022",
"CYCLE_TIME":2741,
"METAL_TEMPERATURE":710,
"DIE_TEMPERATURE":999,
"DIE_TEMPERATURE_SUP":999,
"WATER_IN":230,
"WATER_OUT":460,
"PRESSURE_PATTERN":1
},
{
"MAQUINA":"AQM-901",
"MODELO":"KH5T",
"MOLDE":55,
"SHOT":11,
"FECHA":"30/08/2022",
"CYCLE_TIME":2741,
"METAL_TEMPERATURE":710,
"DIE_TEMPERATURE":999,
"DIE_TEMPERATURE_SUP":999,
"WATER_IN":230,
"WATER_OUT":460,
"PRESSURE_PATTERN":65535
},
{
"MAQUINA":"AQM-901",
"MODELO":"KH5T",
"MOLDE":55,
"SHOT":11,
"FECHA":"30/08/2022",
"CYCLE_TIME":2741,
"METAL_TEMPERATURE":710,
"DIE_TEMPERATURE":999,
"DIE_TEMPERATURE_SUP":999,
"WATER_IN":230,
"WATER_OUT":460,
"PRESSURE_PATTERN":1
},
{
"MAQUINA":"AQM-901",
"MODELO":"KH5T",
"MOLDE":55,
"SHOT":11,
"FECHA":"30/08/2022",
"CYCLE_TIME":2741,
"METAL_TEMPERATURE":710,
"DIE_TEMPERATURE":999,
"DIE_TEMPERATURE_SUP":999,
"WATER_IN":230,
"WATER_OUT":460,
"PRESSURE_PATTERN":65534
}
]

错误原因分析 #

1. 服务端模式与返回格式不匹配：开启了serverSide: true，但服务器返回纯数据数组，而DataTables服务端处理要求返回包含draw、recordsTotal、recordsFiltered、data的标准结构。
2. 数据格式错误转换：ajax成功回调中把JSON对象转成字符串data = JSON.stringify(data)，DataTables无法解析字符串类型的数据，导致回调出错。
3. dataSrc配置位置错误：dataSrc应配置在DataTables的ajax参数中，而非$.ajax的参数里。

解决方案 #

方案一：关闭服务端处理（无需服务端分页/排序时使用） #

将serverSide: true改为serverSide: false，同时简化ajax配置：

$('#table-result').DataTable({
    serverSide: false,
    processing: true,
    deferRender: true,
    "bPaginate": true,
    "bLengthChange": false,
    "bFilter": false,
    "bInfo": true,
    "bAutoWidth": true,
    "ordering": true,
    "bSortClasses": false,
    "bDestroy": true,
    bLengthChange: false,
    "iDisplayLength": 50,
    responsive: true,
    dom: 'Bfrtip',
    ajax: {
        url: '@Url.Action("DataTable_Moldeo")',
        type: "GET",
        contentType: "application/json",
        dataType: 'json',
        data: {
            MaquinasList: $("#MaquinasList").val(),
            ModeloList: $("#ModeloList").val(),
            fecha_ini: $("#fecha_ini_val").val(),
            fecha_fin: $("#fecha_fin_val").val(),
        },
        dataSrc: "" // 纯数组返回时设为空字符串
    }
});

方案二：保持服务端处理（需要服务端分页/排序时使用） #

1. 修改服务器返回格式

服务器需返回符合DataTables服务端要求的JSON结构：

{
    "draw": 1, // 对应前端传入的draw参数，原样返回
    "recordsTotal": 6, // 总记录数
    "recordsFiltered": 6, // 过滤后的记录数
    "data": [
        // 你的数据数组
    ]
}

2. 修正前端脚本

$('#table-result').DataTable({
    serverSide: true,
    processing: true,
    deferRender: true,
    "bPaginate": true,
    "bLengthChange": false,
    "bFilter": false,
    "bInfo": true,
    "bAutoWidth": true,
    "ordering": true,
    "bSortClasses": false,
    "bDestroy": true,
    bLengthChange: false,
    "iDisplayLength": 50,
    responsive: true,
    dom: 'Bfrtip',
    ajax: function (data, callback, settings) {
        $.ajax({
            url: '@Url.Action("DataTable_Moldeo")',
            type: "GET",
            contentType: "application/json",
            dataType: 'json',
            data: {
                draw: data.draw, // 传递draw参数给服务器
                start: data.start,
                length: data.length,
                order: data.order,
                search: data.search,
                MaquinasList: $("#MaquinasList").val(),
                ModeloList: $("#ModeloList").val(),
                fecha_ini: $("#fecha_ini_val").val(),
                fecha_fin: $("#fecha_fin_val").val(),
            },
            success: function (response) {
                // 直接回调服务器返回的完整对象，无需转字符串
                callback(response);
            },
            error: function (e) {
                // 可添加错误提示逻辑
            }
        });
    }
});

内容的提问来源于stack exchange，提问作者Joel Luevano