使用CDN安装Datatables无法渲染，请求排查问题原因

问题 #

尝试实现最基础的Datatables安装，但初始化失败。HTML文件代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> Dashboard </title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.css">
  
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="js/main.js"></script>

  </head>

  <body>
    <table id="table_id" class="display">
        <thead>
            <tr>
                <th>Column A</th>
                <th>Column B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
            </tr>
            <tr>
                <td>Row 2 Data 1</td>
                <td>Row 2 Data 2</td>
            </tr>
        </tbody>
    </table>
    
  </body>
</html>

同时引用的main.js代码如下：

$(document).ready( function () {
    $('#table_id').DataTable();
} );

打开HTML文件后，表格仍处于普通状态，未像官方示例那样渲染，请问哪里出错了？

问题原因与解决方法 #

核心问题是JS文件加载顺序错误：Datatables是基于jQuery开发的插件，必须先加载jQuery库，再加载Datatables的JS文件，否则Datatables无法找到依赖的jQuery对象，直接导致初始化失败。

修改后的HTML代码 #

调整<script>标签顺序，将jQuery放在Datatables JS之前：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> Dashboard </title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.css">
  
    <!-- 先加载jQuery核心库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <!-- 再加载Datatables插件 -->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.js"></script>
    <script src="js/main.js"></script>

  </head>

  <body>
    <table id="table_id" class="display">
        <thead>
            <tr>
                <th>Column A</th>
                <th>Column B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
            </tr>
            <tr>
                <td>Row 2 Data 1</td>
                <td>Row 2 Data 2</td>
            </tr>
        </tbody>
    </table>
    
  </body>
</html>

额外检查点 #

• 确认main.js文件路径正确，保证浏览器能正常加载该文件
• 打开浏览器开发者工具（F12）的控制台，查看是否有其他报错信息，可针对性排查

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