Angular4中使用Bootstrap4 DataTable报$(...).DataTable is not a function错误

云上老周

2026-5-19

嘿，我来帮你解决这个Angular 4里Bootstrap 4 DataTable的报错问题！这个$(...).DataTable is not a function错误，本质是Angular没有正确加载jQuery和DataTable的相关资源，导致组件初始化时找不到DataTable方法。下面是一步步的修复方案，覆盖你提到的所有关键文件：

1. 先安装必要的依赖包

首先得确保你已经安装了jQuery、DataTable核心库以及Bootstrap 4风格的DataTable插件。打开终端运行以下命令：

npm install jquery datatables.net datatables.net-bs4 --save

如果用TypeScript开发，还得装类型定义文件避免类型报错：

npm install @types/jquery @types/datatables.net --save-dev

2. 配置.angular-cli.json（Angular 4专属配置文件）

这个文件负责管理全局资源的加载顺序，必须保证jQuery在DataTable之前加载，否则肯定会报错。找到scripts和styles数组，添加对应的文件路径：

{
  "apps": [
    {
      // 其他配置项...
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/datatables.net/js/jquery.dataTables.min.js",
        "../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"
      ],
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css",
        "styles.css"
      ]
    }
  ]
}

注意：如果你已经手动在index.html里加过这些资源的script标签，一定要删掉，避免重复加载导致冲突！

3. 调整组件文件（dashboard.component.ts）的初始化逻辑

Angular组件的ngOnInit钩子执行时，DOM元素可能还没完全渲染好，直接调用DataTable会找不到元素。所以要改用ngAfterViewInit钩子，同时确保正确引入jQuery的类型：

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements AfterViewInit {

  // 如果没装@types/jquery，就加这句声明
  // declare var $: any;

  ngAfterViewInit(): void {
    // 替换成你实际的表格ID
    $('#dashboard-table').DataTable({
      // 这里可以加你的DataTable配置项
      paging: true,
      searching: true,
      ordering: true,
      responsive: true
    });
  }
}

敲黑板：一定要用ngAfterViewInit，这是Angular官方推荐的操作DOM的时机！

4. 检查模板文件里的表格结构

确保你的表格有标准的HTML结构，DataTable需要完整的<table>标签，包含<thead>和<tbody>：

<table id="dashboard-table" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据 -->
  </tbody>
</table>

常见坑点提醒

加载顺序错误：jQuery必须在所有DataTable相关脚本之前加载，这是最常见的原因
DOM未就绪：用ngOnInit太早，必须等视图初始化完成再调用DataTable
重复加载资源：同时在angular-cli.json和index.html里引入jQuery/DataTable，导致冲突
类型定义缺失：没装@types包，TypeScript会报错找不到$或DataTable

按照上面的步骤操作后，重启Angular服务（ng serve），应该就能正常渲染可排序的DataTable啦！

内容的提问来源于stack exchange，提问作者D. Sean