Angular DataTables：$(...).DataTable 不是函数

Posted 2023-05-07

【中文标题】Angular DataTables：$(...).DataTable 不是函数

【英文标题】：Angular DataTables: $(...).DataTable is not a function

【发布时间】：2018-12-16 03:19:25

【问题描述】：

Angular 版本：6.0.4 ~ 节点版本：10.4.1 ~ NPM 版本：6.1.0

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

在关注这些instructions to install angular-datables 并尝试在表上使用该指令后，就像在他们的Zero Configuration example 中一样，我不断收到此错误：

TypeError: $(...).DataTable 不是函数 在 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>

【问题讨论】：

脚本的顺序是否正确？

在 jquery 然后是数据表，是的。

***.com/questions/47619179/…

我没有在component.ts中导入jquery，因为我没有手动调用该函数。

您使用的是 Angular 2 还是 AngularJS？你能分享你的打字稿代码吗？

【参考方案1】：

通过刷新我的节点模块修复了错误

rm -rf node_modules/
npm cache clear
npm install

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

【讨论】：

感谢它的魅力。对于 Windows rd /s /q "path"

【参考方案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>

【参考方案3】：

我错过了“node_modules/datatables.net/js/jquery.dataTables.js”， ' 在 angular.json 它应该看起来像

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