最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】Reactjs中集成AdminLTE出错:Uncaught TypeError: $(…).DataTable is not a function

AdminLTE crifan 3804浏览 0评论

折腾:

【已解决】ReactJS中点击按钮无法显示下拉弹框

期间,去加上配置,导出jquery后:

  new webpack.ProvidePlugin({
    ‘$’: ‘jquery’,
    ‘window.jQuery’: ‘jquery’,
    ‘jQuery’: ‘jquery’,
    ‘window.$’: ‘jquery’,
  }),

试试:

结果出错:

Uncaught TypeError: $(…).DataTable is not a function
    at HTMLDocument.eval (adminlte_app.js:227)
    at mightThrow (jquery.js:3583)
    at process (jquery.js:3651)

然后去看了看,此处是已经安装了jquery库了:

然后看到是:

之前的AdminLTE的app.js(被我改名为adminlte_app.js),为了支持datable的,然后加上的代码:

  /*
   * enable data table pagination
   * ————————
   */
  $(‘#datatable_example1’).DataTable();
  $(‘#datatable_example2’).DataTable({
    ‘paging’: true,
    ‘lengthChange’: false,
    ‘searching’: false,
    ‘ordering’: true,
    ‘info’: true,
    ‘autoWidth’: false
  });

结果此处识别不了

  $(‘#datatable_example1’).DataTable()

所以:

一是想办法加上  $(xxx).DataTable()的支持

二是去试试,之前在ReactJS-AdminLTE中可以正常工作的datatable放到这里,是否还能正常工作。

Uncaught TypeError: $(…).DataTable is not a function

reactjs Uncaught TypeError: $(…).DataTable is not a function

javascript – TypeError: $(…).DataTable is not a function – Stack Overflow

确保在导入jquery之前,要导入了jquery相关的各种js库,包括:jquery.dataTables的js

此处已经满足此条件了:

vendor.bundle.js中包含了上面的adminlte_app.js,在此之前已经导入了:

dataTables.bootstrap.min.js

jquery.dataTables.min.js

jquery-3.1.1.min.js

javascript – TypeError: $(…).DataTable is not a function – Stack Overflow

javascript – TypeError: $(…)DataTable is not a function – Stack Overflow

Uncaught Type Error: $(…)DataTable is not a function – DataTables forums

Uncaught TypeError: $(…).DataTable is not a function · Issue #214 · rweng/jquery-datatables-rails

[Solved] Error , uncaught typeerror: $(…).datatable is not a function in MVC – CodeProject

先去试试,之前的datatable是否可以显示出来pagination

结果是如果加上jquery定义:

  // new webpack.ProvidePlugin({
  //   ‘$’: ‘jquery’,
  //   ‘window.jQuery’: ‘jquery’,
  //   ‘jQuery’: ‘jquery’,
  //   ‘window.$’: ‘jquery’,
  // }),

然后生成的代码,就无法让:

datatables正常显示出pagination的

-》也就说明之前的代码

  $(‘#datatable_example1’).DataTable()

没有生效了。

而去掉webpack.ProvidePlugin,就可以正常显示data table了。

但是:

【已解决】ReactJS项目中glyphicons-halflings-regular.woff2无法加载

【总结】

所以,此处的解决办法竟然还是:

保持代码和之前一样,去掉webpack.ProvidePlugin:

  // new webpack.ProvidePlugin({
  //   ‘$’: ‘jquery’,
  //   ‘window.jQuery’: ‘jquery’,
  //   ‘jQuery’: ‘jquery’,
  //   ‘window.$’: ‘jquery’,
  // }),

就可以避免这个错误了。

转载请注明:在路上 » 【已解决】Reactjs中集成AdminLTE出错:Uncaught TypeError: $(…).DataTable is not a function

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
84 queries in 0.170 seconds, using 22.15MB memory