使用DataTables CDN加载资源失败（404错误）求助

问题原因 #

你写的CDN资源URL缺少协议前缀（https://或//），浏览器会把这些路径当成当前域名下的相对路径去请求，自然找不到对应资源，所以返回404。另外还有两个小错误：CSS文件不能用<script>标签引入，且DataTables依赖jQuery，你原代码没加这个核心依赖。

修正后的完整代码 #

<!-- 先引入jQuery（DataTables核心依赖，必须放在最前面） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 用link标签引入DataTables样式，补全CDN协议前缀 -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<!-- 补全JS文件的CDN协议前缀 -->
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap4.min.js"></script>

<script>
  $(document).ready(function() {
    $('#example').DataTable();
  });
</script>

关键修正点 #

• 给所有CDN资源URL加上https://前缀，或者用//（自动适配当前页面的协议），确保浏览器能正确识别为外部资源地址。
• 把CSS文件的引入标签从<script>改成<link rel="stylesheet">，这是加载样式文件的标准方式。
• 补充jQuery依赖，DataTables的初始化必须依赖jQuery才能正常运行。

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