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>

Sudiesudnor

Is the order of your scripts correct? – Jabber

As in jquery then datatables, yes. – Sudiesudnor

#47619679 – Bedad

I am not importing jquery in the component.ts as I am not manually calling the function. – Sudiesudnor

Are you using angular 2 or AngularJS? Can you share your typescript code please? – Abolish

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? – Sudiesudnor

@Abolish I've updated my question. – Sudiesudnor

What if you manually call $('table').DataTable() from your component, instead of using the html directive? – Doykos

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 – Abolish

@Doykos jquery__WEBPACK_IMPORTED_MODULE_2__(...).DataTable is not a function – Sudiesudnor

@Abolish My Angular version is 6.0.4. My Node version is 10.4.1. And NPM version 6.1.0. – Sudiesudnor

Answer 1

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.

Sudiesudnor

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

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>

Regain

Answer 3

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

Feuar

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>

Tactical