ERROR TypeError: $(...).DataTable is not a function while using in angular 4

Question

I'm getting ERROR TypeError: $(...).DataTable is not a function while using in angular 4.

Any suggestions for resolving this issue.

"Any suggestions for resolving this issue." Yes, include the DataTables library files. — davidkonrad
– davidkonrad, Commented Dec 3, 2017 at 14:20
Please share the steps, how to include DataTables library files — Voolapati Manohar
– Voolapati Manohar, Commented Dec 3, 2017 at 14:34
I have literally no experience with Angular 2/4/5, but I would certainly first look at l-lin.github.io/angular-datatables/#/getting-started instead of trying to get the naked standalone jQuery version work. — davidkonrad
– davidkonrad, Commented Dec 3, 2017 at 16:23
Try solution given in below URL. stackoverflow.com/questions/32315701/… — IMSREE
– IMSREE, Commented Oct 25, 2018 at 4:48

Bogdan · Accepted Answer · 2017-12-04 03:09:59Z

9

If you are importing jQuery as a local lib, in your *component.ts file, like:

import * as jquery from 'jquery'

remove that line and treat it as a global library:

declare var jquery: any;

or

declare var $: any;

or just add one of that two lines to src/typings.d.ts

answered Dec 4, 2017 at 3:09

Bogdan

1163 bronze badges

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

3 Comments

Jason F Over a year ago

Thank you. declare var $: any; helped me with using jquery / datatables in Angular 6.

NickCoder Over a year ago

Thanks, @Bogdan I was searching this answer on data table site also but any solution over there was not helping your solution did help.

Nick Ruta Over a year ago

Thank you. declare var $: any; works with jquery / datatables in Angular 8.2.8.

PowerStat · Accepted Answer · 2019-04-15 07:23:54Z

1

Still I did not get datable(datatable is not a function) after adding

import * as $ from 'jquery';

Then I added below code also it's working now:

import 'datatables.net';

If you still did receive an error, try with the below also:

import 'datatables.net-bs4';

edited Apr 15, 2019 at 7:23

PowerStat

3,8638 gold badges37 silver badges62 bronze badges

answered Apr 15, 2019 at 6:28

Srinivasan N

6838 silver badges9 bronze badges

Comments

Neto Galvan · Accepted Answer · 2020-04-14 14:55:01Z

-1

En Laravel agregue "render" en los archivos importados.

Mi app.blade.php

<script src=" {{ asset('/assets/admin/plugins/jquery/jquery.min.js') }} "></script> 
<script src=" {{ asset('/assets/admin/plugins/bootstrap/js/bootstrap.bundle.min.js') }} "></script> 
<script src=" {{ asset('/assets/admin/dist/js/adminlte.min.js') }} "></script> 
@yield('scripts')

Y en mi archivo que importo donde esta mi tabla agrego el "defer"

@section('scripts')
    <!-- DataTables -->
    <script src=" {{ asset('/assets/admin/plugins/datatables/jquery.dataTables.min.js' ) }} " defer></script>
    <script src=" {{ asset('/assets/admin/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }} " defer></script>
    <script src=" {{ asset('/assets/admin/plugins/datatables-responsive/js/dataTables.responsive.min.js') }} " defer></script>
    <script src=" {{ asset('/assets/admin/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }} " defer></script>
    <script src=" {{ asset('/assets/admin/usuarios/listar_usuarios.js') }} "></script>
@endsection

answered Apr 14, 2020 at 14:55

Neto Galvan

1

2 Comments

adrisons Over a year ago

Translate to english please :)

Lorenzo Imperatrice Over a year ago

Please use english on SO.

Collectives™ on Stack Overflow

ERROR TypeError: $(...).DataTable is not a function while using in angular 4

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related