DataTables.net Bootstrap 5示例无法正常运行求助

先查依赖加载顺序和完整性 #

这是新手最容易踩的坑，DataTables和Bootstrap5的依赖加载顺序绝对不能乱，正确顺序如下：

1. Bootstrap5的CSS
2. DataTables适配Bootstrap5的CSS
3. jQuery（仅用jQuery初始化时需要）
4. Bootstrap5的JS
5. DataTables核心JS
6. DataTables适配Bootstrap5的JS

举个正确的加载示例：

<!-- 样式文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">

<!-- 脚本文件 -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

注意：DataTables的CSS和JS版本要一致，比如上面都是1.13.6，避免版本不兼容。

排查初始化代码问题 #

原生JS方式（new DataTable('#example')） #

• 必须等DOM加载完再执行初始化，要么把脚本放在</body>标签前，要么用DOMContentLoaded包裹：

document.addEventListener('DOMContentLoaded', function() {
    new DataTable('#example');
});

• 核对表格的id是不是example，大小写完全匹配，别写错字。

jQuery方式（$(document).ready） #

• 先确认已经加载了jQuery，而且加载顺序在DataTables脚本之前
• 代码要写对，注意是首字母大写的.DataTable()（这是新版API）：

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

看控制台报错，精准定位问题 #

控制台的报错信息是关键，对应解决方法：

• $ is not defined：没加载jQuery，或者jQuery在DataTables之后加载了
• DataTable is not defined：没加载DataTables核心JS，或者文件路径错了
• Cannot initialize DataTable on non-existent element：表格id写错了，或者脚本执行时表格还没渲染到DOM里

检查表格结构是否合规 #

DataTables要求表格必须有<thead>和<tbody>标签，不能省略，比如：

<table id="example" class="table table-striped">
    <thead>
        <tr>
            <th>姓名</th>
            <th>职位</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>前端开发</td>
        </tr>
    </tbody>
</table>

确认资源路径有效 #

如果用本地文件，检查文件路径是否正确；用CDN的话，确认链接没打错，比如版本号、文件名是否正确。

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