Uncaught ReferenceError: $ is not defined Datatable not work

Question

我按照https://datatables.net/examples/styling/bootstrap5.html上的说明进行操作

我在这里设置了样式作为序列

<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome Icons -->
<link href="~/lib/fontawesome/css/all.css" rel="stylesheet" />

<!-- Theme style bootstrap 5.1 -->
<link href="~/css/soccer/soccer.min.css" rel="stylesheet" />
<link href="~/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/lib/datatables/datatables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!--icheck-bootstrap v3.0.1-->
<link href="~/lib/icheck-bootstrap/icheck-bootstrap.css" rel="stylesheet" />
<!-- Custome Site csss Style-->
<link rel="stylesheet" href="~/css/site.css" />
<link href="~/css/layerslider.css" rel="stylesheet" />
<!-- For Custom External Login Button -->
<link href="~/css/externalLogin.css" rel="stylesheet" />
<!-- Theme style admin LTE 3.1 -->
<link href="~/css/adminlte.css" rel="stylesheet" />
<link href="~/css/footballMatch.css" rel="stylesheet" />

以及这里的脚本顺序

<!-- jQuery 3.6-->
<script src="~/lib/jquery/dist/jquery.min.js"></script>

<!-- Bootstrap 5.1 bootstrap.bundle.js and bootstrap.bundle.min.js include Popper, but not jQuery-->
<script src="~/lib/bootstrap/js/bootstrap.bundle.js"></script>
<script src="~/lib/datatables/datatables.js"></script>
<script src="~/lib/datatables/DataTables/js/dataTables.bootstrap5.js"></script>

<!-- AdminLTE App 3.1 -->
<script src="~/js/adminlte.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/js/tables/table.js" asp-append-version="true"></script>

在视图中

@model IEnumerable

@{
ViewData["Title"] = "ViewAllMatch";
}

<h3>View All Match</h3>
<script>
$(document).ready(function () {
    $('#ViewAllMatchTbl').DataTable();
});
</script>

<div class="table table-responsive-sm">
    <table id="ViewAllMatchTbl" class="table table-striped table-hover">

//删除即可清除

    </table>
</div>

我怎样才能知道和调试正确的样式顺序或脚本。 谢谢

Answer 1

尝试使用以下脚本：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.2.0-rc/js/adminlte.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

我使用脚本并没有收到错误：