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>

https://stackoverflow.com/questions/47619179/error-typeerror-datatable-is-not-a-function-while-using-in-angular-4 — Sajeetharan, Jul 08 '18 at 03:50
I am not importing jquery in the component.ts as I am not manually calling the function. — Ace, Jul 08 '18 at 03:53
Are you using angular 2 or AngularJS? Can you share your typescript code please? — Debojyoti, Jul 08 '18 at 04:19
Version 6.0.4. According to the example I followed, there was nothing to add to the ts file of the component, only to add `datatable` to the table in the html. Would you like me to add the section of the installed directive file where it says the error is? — Ace, Jul 08 '18 at 05:01
What if you manually call $('table').DataTable() from your component, instead of using the html directive? — David, Jul 08 '18 at 05:39
Ok, it looks like your node version is little outdated. Try to update it and then install all the packages in your angular app. @KayronDeacon — Debojyoti, Jul 08 '18 at 06:03
@David `jquery__WEBPACK_IMPORTED_MODULE_2__(...).DataTable is not a function` — Ace, Jul 08 '18 at 11:08
@Debojyoti My Angular version is 6.0.4. My Node version is 10.4.1. And NPM version 6.1.0. — Ace, Jul 08 '18 at 11:11

score 6 · Accepted Answer · answered Jul 09 '18 at 22:24

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 09 '18 at 22:24

Ace

1,028
2
10
22

1

Thanks it works like charm. for windows `rd /s /q "path"` – Digital Alchemist Oct 17 '19 at 02:23

score 0 · Answer 2 · answered Mar 02 '21 at 18:12

    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>

score 0 · Answer 3 · answered Feb 11 '22 at 13:10

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

score 0 · Answer 4 · answered Feb 14 '23 at 09:38

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>

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

4 Answers4