Uncaught ReferenceError: $ is not defined Datatable not work - database

Question

I follow instruction on https://datatables.net/examples/styling/bootstrap5.html
And I have setup in the style as sequence here
<!-- 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" />
And the sequence of the script here
<!-- 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>
And in the view
#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">
//Remove to clear
</table>
</div>
How can I know and debug the right order of style or the script.
Thanks

Answer 1

Try to use the following scripts：
<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>
I use the scripts and do not get error: