使用DataTables时出现Uncaught TypeError: Cannot read properties of undefined (reading 'sClass')错误

以下是针对该错误的常见排查和解决步骤：

1. 核对资源加载顺序 #

DataTables依赖jQuery，必须保证加载顺序正确：

• 先加载jQuery，再加载DataTables的JS和CSS文件，最后加载自定义的product.js
• 示例布局文件中的加载顺序：

  <!-- 优先加载jQuery -->
  <script src="~/lib/jquery/dist/jquery.min.js"></script>
  <!-- 再加载DataTables核心文件 -->
  <script src="~/lib/datatables/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" href="~/lib/datatables/css/jquery.dataTables.min.css" />
  <!-- 最后加载自定义脚本 -->
  <script src="~/js/product.js"></script>
  

2. 验证AJAX接口返回格式 #

DataTables默认要求返回的JSON包含data字段作为数据容器，ASP.NET Core接口需返回符合格式的结构：

public IActionResult GetAll()
{
    var productList = _productRepository.GetAllProducts();
    // 必须将数据包装在data属性中
    return Json(new { data = productList });
}

如果接口直接返回纯数组，DataTables无法解析会抛出类型错误。

3. 检查loadDataTable函数语法 #

确保函数内的DataTables配置无语法错误，且字段匹配正确：

function loadDataTable() {
    $('#tableData').DataTable({
        "ajax": {
            "url": "/admin/product/getall",
            "type": "GET",
            "datatype": "json"
        },
        "columns": [
            { "data": "id", "width": "10%" },
            { "data": "productName", "width": "25%" },
            { "data": "unitPrice", "width": "15%" }
            // 列的data值需与接口返回的实体属性名完全匹配（大小写敏感）
        ]
    });
}

4. 确保DOM加载完成后初始化 #

必须在页面元素加载完成后调用初始化函数，避免找不到tableData元素：

$(document).ready(function () {
    loadDataTable();
});

5. 利用控制台定位具体错误 #

打开浏览器F12控制台，查看TypeError的详细描述：

• 若提示Cannot read property 'DataTable' of undefined：说明jQuery或DataTables未正确加载
• 若提示Cannot read property 'data' of undefined：说明接口返回数据格式不符合DataTables要求

内容的提问来源于stack exchange，提问作者Maruf Hasnat