Angular DataTables: $(...).DataTable不是一个函数。

Question

Angular版本：6.0.4 ~ Node版本：10.4.1 ~ NPM版本：6.1.0

我看到这个问题被问了很多次，但没有得到答案。

按照这些指示安装angular-datables，并尝试在表格上使用指令，就像他们的零配置示例一样，我不断遇到这个错误：

TypeError: $(...).DataTable不是一个函数
at angular-datatables.directive.js:42

包含的样式和脚本

"styles": [
   "node_modules/bootstrap/dist/css/bootstrap.min.css",
   "node_modules/datatables.net-dt/css/jquery.dataTables.css",
   "src/styles.css"
],
"scripts": [
   "node_modules/jquery/dist/jquery.min.js",
   "node_modules/bootstrap/dist/js/bootstrap.min.js",
   "node_modules/datatables.net/js/jquery.dataTables.js"
]

在 app.module.ts 中导入

import { DataTablesModule } from 'angular-datatables';

DataTablesModule被添加到导入数组中。

*.component.html

<h1>View Accounts</h1>
<table class='table table-dark text-center table-striped table-hover rounded' datatable>
  <thead class='thead-dark'>
    <tr>
      <td>#</td>
      <td>Account Name</td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let account of db.accounts; let i = index' routerLink='/account/{{account.id}}'>
      <td>{{i+1}}</td>
      <td>{{account.accountHolder}}</td>
    </tr>
  </tbody>
</table>

- Ace

---

就像在jQuery中使用DataTables一样，是的。 - Ace

版本6.0.4。根据我所遵循的示例，组件的ts文件中没有需要添加的内容，只需在html表格中添加“datatable”。您是否希望我添加已安装指令文件的部分，以显示错误信息？ - Ace

@Debojyoti，我已经更新了我的问题。 - Ace

如果您从组件中手动调用$('table').DataTable()，而不是使用HTML指令，会发生什么？ - David

好的，看起来你的Node版本有点过时了。 尝试更新它，然后安装你的Angular应用程序中的所有包。 @KayronDeacon - Debojyoti

Answer 1

通过刷新我的节点模块，错误已经被修复。

rm -rf node_modules/
npm cache clear
npm install

我很可能安装了两个版本的jQuery，在datatables绑定到它之后，重置了我的jQuery实例。

- Ace

---

谢谢，它像魔法一样运行良好。对于Windows，使用命令rd /s /q "path"。 - Digital Alchemist

Answer 2

    Angular version(9 and above):
    
    component.ts
    ------------
    import * as $ from 'jquery';
    import 'datatables.net';
    import { from, Subject } from 'rxjs';
    
    export class testComponent implements OnInit {
      dtOptions: DataTables.Settings = {};
      dtTrigger: Subject<any> = new Subject();
      
    }

component.html
--------------
 
 <table  [dtTrigger]="dtTrigger" id="example" datatable  class="row-border hover">
     <thead><tr><th></th></tr></thead>
    <tbody>....</tbody>
<table>

- Arun

Answer 3

我在 angular.json 中缺少 ' "node_modules/datatables.net/js/jquery.dataTables.js",' 的配置。 正确的配置应该是这样的：

"scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/datatables.net/js/jquery.dataTables.js",
          "node_modules/bootstrap/dist/js/bootstrap.js"
        ]

- Bill8080

Answer 4

I added 2 links in index.html and that solved my problem

  <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

  <script src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>

- Md Shahriar