jquery - DataTables() 不是函数

Question

我在使用 DataTables 时遇到问题：

我已经使用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>

我有一个“DataTable”的脚本：

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

但我总是收到以下错误：

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

这是我的html页面：

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

标签： jquerydatatables

Answer 1

您正在使用 div 中的 id 而不是表中的 id。

尝试这个：

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