CODEWITHSUNDEEP
angulardatatables
Voolapati Manohar
Voolapati Manohar

Reputation: 67

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

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

enter image description here

Any suggestions for resolving this issue.

Upvotes: 3

Views: 9066

Answers (3)

Neto Galvan
Neto Galvan

Reputation: 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

Upvotes: -1

Srinivasan N
Srinivasan N

Reputation: 683

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';

Upvotes: 1

Bogdan
Bogdan

Reputation: 116

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

Upvotes: 9

Related Questions