使用DataTables时出现mData未定义错误，请求排查解决

阿华AIGC实验室

2026-5-13

解决DataTables的mData未定义错误

嘿，我一眼就揪出了几个导致你遇到Uncaught TypeError: Cannot read property 'mData' of undefined错误的关键问题，咱们逐个来修复：

问题1：表头标签拼写错误

你把表格的表头标签写成了<thread>，这是个笔误！正确的标签应该是<thead>。DataTables严重依赖正确的<thead>结构来识别列的定义，拼写错误会让它找不到列的元数据，直接触发mData相关的报错。

问题2：jQuery代码语法不完整

你的$(document).ready()函数没写完——缺少了结尾的});，而且脚本标签直接放在了整个HTML文档的外面！这会导致两种问题：要么脚本执行时DOM还没加载完，找不到#seats表格；要么直接因为语法错误中断运行，DataTables根本初始化不起来。

问题3：资源加载顺序不合理

你先加载了DataTables的JS文件，才在<head>里加载CSS，而且脚本位置完全不对。正确的顺序应该是先加载样式文件，再在DOM结构加载完成后执行脚本。

下面是修正后的完整代码：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.css"/>
</head>
<body>
    <div class="container">
        <table class="table table-hover" id="seats">
            <thead>
                <tr>
                    <th>Seat Number</th>
                    <th>Full Name</th>
                    <th>Status and Level</th>
                </tr>
            </thead>
            <tbody>
                <tr><td class='one'>1</td><td class='two'>NAME1</td><td class='three'>...</td></tr>
                <tr><td class='one'>106</td><td class='two'>NAME2</td><td class='three'>...</td></tr>
                <tr><td class='one'>107</td><td class='two'>NAME3</td><td class='three'>...</td></tr>
                <tr><td class='one'>113</td><td class='two'>NAME4</td><td class='three'>...</td></tr>
            </tbody>
        </table>
    </div>

    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#seats').DataTable( { "order": [[ 1, "desc" ]] } );
        });
    </script>
</body>
</html>