使用jQuery Slick轮播弹出DataTables非表格节点(DIV)初始化警告如何解决

根因说明 #

官方原生jQuery Slick本身不包含任何DataTables依赖，出现该报错的常见原因有两个：

• 项目公共模板、第三方依赖包、或你使用的是被篡改过的非官方Slick文件，被额外打包了DataTables代码
• 项目中存在使用通配选择器的DataTables初始化逻辑，误匹配到了#lista-anuncios这个DIV元素

具体解决步骤 #

• 第一步：定位DataTables引入来源
  打开浏览器开发者工具的「网络」面板，筛选JS资源，搜索datatable关键词，找到对应的加载文件，直接删除不必要的DataTables引入即可。
• 第二步：排查误触发初始化逻辑
  全局搜索项目代码中DataTable()、dataTable()的调用逻辑，检查是否存在$('[id*=lista]')、$('div')这类通配选择器的初始化写法，调整选择器范围仅匹配table元素即可。
• 第三步：验证Slick文件合法性
  在调用Slick代码前加入日志，确认Slick方法是否被篡改：

  console.log($.fn.slick.toString())
  

  如果输出内容中存在DataTables相关代码，说明你引入的Slick文件被篡改，替换为官方原生Slick文件即可解决冲突。
• 第四步：临时兼容方案（暂时找不到引入来源时使用）
  在页面所有JS代码执行的最前面加入以下官方配置，可直接关闭DataTables的警告弹窗，远比重写alert合理：

  if ($.fn.dataTable) {
    $.fn.dataTable.ext.errMode = 'none';
  }
  

内容的提问来源于stack exchange，提问作者Bruno Lima Coaracy