jQuery ready中DataTable变量外部调用未定义的解决方法

核心是JavaScript变量作用域限制：你在$(document).ready()回调函数内部通过var声明的oTable属于该函数的局部变量，仅能在回调函数内部访问。定义在全局作用域的deleteProduct函数无法读取到这个局部变量，因此调用时会抛出oTable未定义的错误。

你可以任选以下一种方案修复，第二种更推荐：

• 方案1：提升变量作用域到全局
  在$(document).ready()外部提前声明oTable变量，回调内部直接给全局变量赋值即可，修改后的JS结构如下：

  // 全局作用域声明变量
  var oTable;
  $(document).ready(function(){
    // 移除这里的var关键字，给全局变量赋值
    oTable = $('#products').DataTable(
      {
        // 原有配置全部保持不变
        "processing": true,
        "serverSide": true,
        // ... 其余原有配置项不需要改动
      }
    );
  });
  
  // 原有deleteProduct函数不需要改动即可正常调用oTable
  function deleteProduct(id) {
    // 原有逻辑不变
  }
  

• 方案2：按需获取DataTable实例（推荐）
  DataTable初始化后会在对应的DOM元素上缓存实例，不需要额外存储全局变量，直接在需要调用的地方通过选择器获取实例即可，不需要改动原有初始化部分的代码，只需要修改deleteProduct里的刷新逻辑：

  function deleteProduct(id) {
              $.ajax({
                  url: 'deleteProduct.php',
                  type: "post",
                  data: {"id":id },
                  // 建议删除async: false配置，同步请求会阻塞浏览器造成卡顿
                  dataType: "json",
                  success: function (data) {
                          alert('Deleted');
                          setTimeout(function () {
                              // 直接从表格DOM获取已初始化的DataTable实例
                              $('#products').DataTable().ajax.reload();
                          }, 500);
                        
                  },
                  error: function () {
                      alert('Not Deleted');
                  }
              });
  }
  

• 你当前写的async: false是同步AJAX请求，执行时会阻塞整个浏览器的UI线程，造成页面无响应，建议删除该配置，使用默认的异步请求即可，success回调本身就会在请求完成后触发，不需要同步等待。
• 搜索节流逻辑中的searchTerm变量没有用var/let/const声明，会意外泄露为全局变量，建议在节流逻辑前补充变量声明，避免全局污染。

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