Angular DataTables: $(...).DataTable is not a function

Question

Angular Version: 6.0.4 ~ Node Version: 10.4.1 ~ NPM Version: 6.1.0

I've seen this question asked many times, but not answered.

After following these instructions to install angular-datables, and trying to use the directive on a table, as in their Zero Configuration example, I keep getting this error:

TypeError: $(...).DataTable is not a function
at angular-datatables.directive.js:42

Included Styles and Scripts

"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"
]

Import in app.module.ts

import { DataTablesModule } from 'angular-datatables';

DataTablesModule is added to array of imports.

*.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>

I am not importing jquery in the component.ts as I am not manually calling the function. — Ace
– Ace, Commented Jul 8, 2018 at 3:53
Are you using angular 2 or AngularJS? Can you share your typescript code please? — Debojyoti
– Debojyoti, Commented Jul 8, 2018 at 4:19

Ace · Accepted Answer · 2018-07-09 22:24:47Z

6

The error was fixed by doing a refresh of my node modules

rm -rf node_modules/
npm cache clear
npm install

I likely had two versions of jQuery installed, resetting my jQuery instance after datatables had bound to it.

answered Jul 9, 2018 at 22:24

Ace

1,1462 gold badges11 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Digital Alchemist Over a year ago

Thanks it works like charm. for windows rd /s /q "path"

Arun · Accepted Answer · 2021-03-02 18:12:04Z

0

    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>

answered Mar 2, 2021 at 18:12

Arun

731 silver badge4 bronze badges

Comments

Bill8080 · Accepted Answer · 2022-02-11 13:10:17Z

0

I was missing ' "node_modules/datatables.net/js/jquery.dataTables.js", ' in angular.json It should look like

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

answered Feb 11, 2022 at 13:10

Bill8080

1

Comments

Md Shahriar · Accepted Answer · 2023-02-14 09:38:48Z

0

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>

answered Feb 14, 2023 at 9:38

Md Shahriar

2,86227 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular DataTables: $(...).DataTable is not a function

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related