为什么我得到 Uncaught TypeError: $(...).DataTable is not a function

时间:2021-01-21 10:10:58

标签: javascript asp.net-core datatables

我开始使用 DataTable.js,当我想集成到我在 ASP.NET CORE MVC 5.0 中完成的项目时,我收到了类似的错误

Uncaught TypeError: $(...).DataTable is not a function

我尝试谷歌,我发现当你的 JQuery 是旧版本时可能会出现这个错误,但我更新到最新版本 3.7.1

<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>

我还看什么,我尝试将函数调用更改为按 ID 和按类调用,但也没有任何变化。 这是我的布局页面,其中包含 datatable.min.jsdatatable.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - BergClinic</title>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

    <link rel="stylesheet" type="text/css" href="~/datatables/datatables.min.css" />
    <link rel="stylesheet" type="text/css" href="~/datatables/datatables.css" />

    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" href="~/fontawesome/css/all.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="~/css/site.css" />


</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">BergClinic</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="Patient" asp-action="Index">Patients</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="Doctor" asp-action="Index">Doctors</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="AdmissionPatient" asp-action="Index">Admission patient</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-white-50 bg-primary">
        <div class="container">
            &copy; 2021 - BergClinic
        </div>
    </footer>

    <script type="text/javascript" src="~/datatables/datatables.min.js"></script>
    <script type="text/javascript" src="~/datatables/datatables.js"></script>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!-- include summernote css/js -->
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>



    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

在我的索引视图页面中,我还在以下意思中创建了对数据表的调用

@model IEnumerable<BergClinics.Models.Doctor>
@{
    ViewData["Title"] = "Index";
}

<div class="container p-3 bg-white">
    <div class="row pt-4">
        <div class="col-6">
            <h2 class="text-primary">Doctor's List</h2>
        </div>        
    </div>

    <br /><br />

    @if (Model.Count() > 0)
    {
        <table class="table datatable-responsive datatable-doctor"  style="width:100%">
            <thead>
                <tr>
                    <th>
                        Doctor Name
                    </th>                   
                    <th>
                        Code
                    </th>
                    <th>
                        Speciality
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var obj in Model)
                {
                    <tr>
                        <td width="25%">@obj.Firstname @obj.Lastname</td>                       
                        <td width="25%">@obj.Code</td>
                        <td width="25%">@obj.Speciality</td>


                        <td class="text-center">
                            <div class="w-75 btn-group" role="group">
                                <a asp-controller="Doctor" asp-route-Id="@obj.Id" asp-action="Edit" class="btn btn-primary mx-2">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a asp-controller="Doctor" asp-route-Id="@obj.Id" asp-action="Delete" class="btn btn-danger mx-2">
                                    <i class="far fa-trash-alt"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    }
    else
    {
        <p> No Doctor exists.</p>
    }

</div>


<script>
    $('.datatable-doctor').DataTable({
        dom: 'Bfrtip',
        //buttons: [
        //    {
        //        text: '<i class="btn btn-info"><i class="fas fa-plus"></i>&nbsp; Create New Doctor</a>',
        //        className: 'btn bg-blue',
        //        action: function (e, dt, node, config) {
        //            window.location.replace("/Doctor/Create");
        //        }
        //    }
        //],
        columnDefs: [

            //Ovaj dio je potreban
            {
                responsivePriority: 1,
                targets: -1
            },
            {
                targets: [0],
                orderable: true,
                searchable: true,
                printable: true,
                width: "120"
            }
        ]
    });

</script>

有谁知道我哪里出错了?这里有什么问题?

1 个答案:

答案 0 :(得分:0)

当您加载 jQuery 时,您会创建一个 $jQuery 的新实例,它们没有任何插件之前已加载并且附加到以前的 jQuery 实例。

<块引用>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

您正在加载四种不同版本的 jQuery!

加载一个并确保它是当前版本。

删除上面引用的所有行,除了第一行。


您正试图在加载在文档正文中的脚本中调用 DataTables,该脚本位于您所在的页脚上方:

<块引用>
<script type="text/javascript" src="~/datatables/datatables.min.js"></script>
<script type="text/javascript" src="~/datatables/datatables.js"></script>

您需要在调用它之前加载插件。

您也不应该两次加载插件。

移动其中一行,使其紧跟在您加载 jQuery 的行之后。删除另一个。