DataTables() is not a function

Question

I have a problem using DataTables:

I have imported it using cdn:

<link rel="stylesheet" href="./assets/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>

and I have a script to "DataTable" a :

<script type="text/javascript">
$(document).ready(function() {
    $('#dataTableUser').DataTable();
});

but I always get the following error:

zone-evergreen.js:172 Uncaught TypeError: $(...).DataTable is not a function

here's my html page:

<div style="margin-top: 30px" id="wrapper">
<div class="d-flex flex-column" id="content-wrapper">
    <div id="content">
        <div class="container-fluid">
            <div class="card shadow">
                <div class="card-body">
                    <div class="row">

                    <div class="table-responsive table mt-2" id="dataTableUser" role="grid" aria-describedby="dataTable_info">
                        <table class="table dataTable my-0" id="dataTable">
                            <thead>
                                <tr>
                                    <th>Username</th>
                                    <th>Email</th>
                                    <th>P.IVA</th>
                                    <th>C.Fiscale</th>
                                    <th>Approva</th>
                                    <th>Rifiuta</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let user of users">
                                    <td><a href="/back/(secondRouter:back-profilo)?id={{ user.id_user }}">{{ user.user_name }}</a></td>
                                    <!-- <td><a (click)="navigate2()">{{ user.user_name }}</a></td> -->
                                    <td>{{ user.email }}</td>
                                    <td>{{ user.vat }}</td>
                                    <td>{{ user.cod_fisc }}<br></td>
                                    <td><i style="margin-left: 15%" class="fa fa-check"></i></td>
                                    <td><i style="margin-left: 15%" class="fa fa-times-circle" aria-hidden="true"></i></td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Username</th>
                                    <th>Email</th>
                                    <th>P.IVA</th>
                                    <th>C.Fiscale</th>
                                    <th>Approva</th>
                                    <th>Rifiuta</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

You are using the id from your div instead of the id from your table.

Try this:

$(document).ready(function() {
    $('#dataTable').DataTable();
});