React集成jQuery DataTable报错：$(...).DataTable不是函数

嘿，我来帮你排查这个问题！这个报错通常是DataTable没有正确挂载到jQuery上，或者执行时机不对导致的，咱们一步步来解决：

1. 检查脚本加载顺序（最常见原因） #

你必须保证脚本的加载顺序是先jQuery，再DataTable核心库，最后是你的自定义datatable-advanced.js。在public/index.html里的脚本标签要按这个顺序放：

<!-- 先加载jQuery -->
<script src="assets/app-assets/js/libs/jquery.min.js"></script>
<!-- 然后加载DataTable核心JS -->
<script src="assets/app-assets/js/scripts/tables/datatables/datatables.min.js"></script>
<!-- 最后加载你的自定义DataTable配置脚本 -->
<script src="assets/app-assets/js/scripts/tables/datatables/datatable-advanced.js" type="text/javascript"></script>

注意：很多Bootstrap模板会把DataTable的核心库和插件分开，你得确认模板里的DataTable核心文件有没有被正确引入，别只加了自定义配置脚本却漏了核心库。

2. 适配React的DOM渲染时机 #

React组件是异步渲染的，$(document).ready只会监听初始DOM加载完成，但你的表格是React组件渲染出来的，可能在ready事件触发后才生成。所以你需要把DataTable的初始化代码移到React组件的生命周期钩子中：

函数组件示例： #

import React, { useEffect } from 'react';

function MyTableComponent() {
  useEffect(() => {
    // 确保DOM已经渲染完成，再初始化DataTable
    if (window.jQuery) {
      const $ = window.jQuery;
      // 初始化你的表格
      const eventsTable = $('.dom-jQuery-events').DataTable();
      // 绑定点击事件（修正原代码中未定义的table变量）
      $('.dom-jQuery-events tbody').on('click', 'tr', function() {
        const data = eventsTable.row(this).data();
        alert('You clicked on ' + data[0] + '\'s row');
      });

      // 其他DataTable初始化代码也移到这里
      $('.column-rendering').DataTable({
        "columnDefs": [{
          "render": function(data, type, row) {
            return data + ' (' + row[3] + ')';
          },
          "targets": 0
        }, {
          "visible": false,
          "targets": [3]
        }]
      });

      // 组件卸载时销毁DataTable，避免内存泄漏
      return () => {
        $('.dom-jQuery-events').DataTable().destroy();
        $('.column-rendering').DataTable().destroy();
        // 其他表格也同理销毁
      };
    }
  }, []); // 空数组确保只在组件挂载时执行一次

  return (
    <table className="table table-striped table-bordered dom-jQuery-events">
      {/* 表格内容 */}
    </table>
  );
}

export default MyTableComponent;

类组件示例： #

import React, { Component } from 'react';

class MyTableComponent extends Component {
  componentDidMount() {
    const $ = window.jQuery;
    // 初始化表格
    this.eventsTable = $('.dom-jQuery-events').DataTable();
    // 绑定点击事件
    $('.dom-jQuery-events tbody').on('click', 'tr', () => {
      const data = this.eventsTable.row(this).data();
      alert('You clicked on ' + data[0] + '\'s row');
    });

    // 其他DataTable初始化逻辑...
  }

  componentWillUnmount() {
    // 销毁表格，清理资源
    this.eventsTable.destroy();
  }

  render() {
    return (
      <table className="table table-striped table-bordered dom-jQuery-events">
        {/* 表格内容 */}
      </table>
    );
  }
}

export default MyTableComponent;

3. 确认全局jQuery的可用性 #

如果是用npm安装的jQuery，可能需要把它暴露到全局，让DataTable能找到它。可以在src/index.js里添加：

import $ from 'jquery';
window.$ = $;
window.jQuery = $;

或者直接在public/index.html里用模板自带的本地jQuery文件/CDN引入，避免模块作用域的问题。

4. 补充：检查DataTable样式文件 #

虽然不影响JS报错，但为了表格样式正常，也要确保DataTable的CSS文件被正确引入到public/index.html：

<link rel="stylesheet" href="assets/app-assets/css/pages/data-list-view.css">
<!-- 替换为模板中对应的DataTable样式文件路径 -->

按照这些步骤排查，应该就能解决你的问题了！

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