使用JS数组生成Datatable时出现Uncaught TypeError: Cannot read property 'mData' of undefined错误求助

这个错误在DataTables初始化时非常常见，核心原因是DataTables无法正确匹配你的数据集列数和表格的列配置，结合你的代码场景，我整理了几个针对性的修复步骤：

1. 先修复数据集的完整性 #

从你提供的代码看，最后一条数据是截断的：

[ "player1", "8", "0", "upgrade level...

这条数据的列数不完整（应该是4个元素但被截断了），DataTables要求每一行数据的长度必须完全一致，否则会触发列匹配错误。先把所有行的数据补全，确保每一行都是4个元素。

2. 显式配置columns选项 #

你的HTML表格是空的（只有<table>标签，没有<thead>和<th>），如果只传入data而不定义columns，DataTables的自动列检测逻辑很容易出问题。显式指定列配置可以彻底解决这个问题：

完整可运行代码示例 #

<!-- HTML部分 -->
<table class="table display" id='contest__table' style="width:100%"></table>

<!-- JavaScript部分（确保已加载jQuery和DataTables） -->
<script>
var dataSet = [
    [ "player1", "1", "0", "upgrade level "],
    [ "player1", "2", "0", "upgrade level "],
    [ "player1", "3", "0", "upgrade level "],
    [ "player1", "4", "0", "upgrade level "],
    [ "player1", "5", "0", "upgrade level "],
    [ "player1", "6", "0", "upgrade level "],
    [ "player1", "7", "0", "upgrade level "],
    [ "player1", "8", "0", "upgrade level "] // 已修复截断问题
];

$(document).ready(function() {
    $('#contest__table').DataTable({
        data: dataSet,
        // 显式定义每一列，数量要和数据集中的列数一致
        columns: [
            { title: "Player Name" },
            { title: "Level" },
            { title: "Score" },
            { title: "Action" }
        ]
    });
});
</script>

3. 其他排查点 #

如果上面的步骤还没解决问题，可以检查这两个细节：

• 脚本加载顺序：必须先加载jQuery，再加载DataTables的JS文件和CSS文件，顺序错了也会导致初始化失败
• DOM加载时机：确保DataTables的初始化代码放在$(document).ready()回调里，避免DOM还没渲染完成就执行初始化

内容的提问来源于stack exchange，提问作者pucca garu