jQuery DataTables无法运行问题：jQuery及$未定义报错排查

嘿，我碰到过好多次这种问题，别着急，咱们一步步排查，大概率是这几个常见原因：

• 绝对要先引入jQuery，再放DataTables
  这是最容易踩的坑！DataTables完全依赖jQuery，所以加载顺序必须是：先加载jQuery的JS文件，再加载DataTables的CSS和JS。给你个正确的示例：

  <!-- 第一步：加载jQuery -->
  <script src="path/to/jquery.min.js"></script>
  <!-- 第二步：加载DataTables样式 -->
  <link rel="stylesheet" href="path/to/datatables.min.css">
  <!-- 第三步：加载DataTables核心脚本 -->
  <script src="path/to/datatables.min.js"></script>
  

  要是你把DataTables的脚本放在jQuery前面，浏览器肯定会报jQuery未定义——因为DataTables要调用jQuery的时候，它还没加载呢！

• 检查jQuery文件是否真的加载成功
  有时候路径写错了，jQuery根本没加载进来。你可以按F12打开浏览器的开发者工具，切换到「Network」标签，刷新页面后搜索"jquery"，看看对应的请求状态码是不是200。如果是404，说明文件路径不对，比如你把jQuery放在js文件夹里，就得写成src="js/jquery.min.js"，而不是直接写src="jquery.min.js"。

• 小心$被其他库冲突覆盖
  要是你的页面里还引入了其他JS库（比如Prototype、MooTools），它们可能会和jQuery抢$的使用权，导致$变成未定义。这时候有两个解决办法：

  1. 用jQuery代替$来初始化DataTables：

     jQuery(document).ready(function() {
         jQuery('#your-table-id').DataTable();
     });
     

  2. 启用jQuery的noConflict模式，自定义一个替代符号：

     var $j = jQuery.noConflict();
     $j(document).ready(function() {
         $j('#your-table-id').DataTable();
     });
     

• 别重复引入jQuery
  有时候不小心在页面头部和底部各引入了一次jQuery，这会导致后面的引入覆盖前面的，甚至引发冲突。检查一下你的Index.php，确保只引入一次jQuery，而且位置在DataTables之前。

• 确认jQuery版本和DataTables兼容
  DataTables对jQuery版本有要求，比如最新版的DataTables需要jQuery 1.12.4及以上版本。要是你用的是好几年前的老jQuery版本，很可能会不兼容。你可以查一下你用的DataTables版本对应的jQuery要求，把jQuery更新到合适的版本就行。

如果这些步骤都试过还是没解决，你可以把Index.php里的脚本引入部分和DataTables的初始化代码贴出来，我帮你再揪问题！

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