Datatables无法显示数据求助：已引入官方CDN仍无效

我帮你排查了下问题，主要有几个关键问题导致表格没渲染出数据，咱们一步步修正：

• 缺少jQuery依赖：DataTables是基于jQuery开发的，你只引入了DataTables的CSS和JS，却没加载jQuery，这是最核心的问题。
• 数据变量未定义：你直接在初始化代码里用了data，但没有把提供的JSON数组赋值给这个变量，浏览器会抛出data is not defined的错误。
• 初始化代码未等待DOM就绪：如果初始化代码在DOM加载完成前执行，可能找不到#example表格元素，导致初始化失败。
• 重复引入资源：你的页面里重复添加了DataTables的CDN链接，虽然不影响功能，但可以清理掉重复的部分。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <!-- 先引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入DataTables的CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
    <!-- 引入DataTables的JS -->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
</head>
<body>
    <table id="example" class="display">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Salary</th>
            </tr>
        </thead>
    </table>

    <script>
        // 等待DOM加载完成后执行初始化
        $(document).ready(function() {
            // 定义数据变量
            const data = [
                { "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120" },
                { "name": "Garrett Winters", "position": "Director", "salary": "$5,300" }
            ];
            
            // 初始化DataTables
            $('#example').DataTable({
                data: data,
                columns: [
                    { data: 'name' },
                    { data: 'position' },
                    { data: 'salary' }
                ]
            });
        });
    </script>
</body>
</html>

你可以直接复制这段代码测试，应该就能正常显示带数据的DataTables表格了。

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