Datatable报Uncaught ReferenceError: $ is not defined不生效，如何排查资源顺序

控制台报错Uncaught ReferenceError: $ is not defined核心原因是jQuery未成功加载，或是初始化DataTable的脚本执行时机早于jQuery加载完成的时间，按以下步骤逐一排查即可：

1. 检查jQuery文件加载状态 #

打开浏览器开发者工具的「网络」面板，筛选JS类型资源，刷新页面后查看jquery.min.js的请求状态：

• 如果返回404/500等错误，检查引入路径~/lib/jquery/dist/jquery.min.js是否正确，确认本地对应路径下存在该文件
• 如果请求被拦截，检查是否有浏览器插件、安全策略拦截了静态资源加载

2. 调整脚本执行顺序 #

你当前给出的公共脚本引入顺序本身是符合要求的，问题大概率出在视图内的初始化脚本执行时机过早：如果你的公共脚本是放在母版页（Layout）的底部（</body>标签前），视图内直接写的<script>会先于公共脚本加载执行，就会出现$未定义的错误。
调整方法：
在母版页公共脚本引入的最后位置预留脚本节：

<!-- 公共脚本引入 -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<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>
<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>
<!-- 预留视图自定义脚本位置 -->
@RenderSection("Scripts", required: false)
</body>

然后把视图里的初始化代码放到Scripts节中，保证它晚于jQuery和DataTable脚本加载：

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

<h3>View All Match</h3>
<div class="table table-responsive-sm">
    <table id="ViewAllMatchTbl" class="table table-striped table-hover">
// 省略表格内容
    </table>
</div>

@section Scripts {
<script>
$(document).ready(function () {
    $('#ViewAllMatchTbl').DataTable();
});
</script>
}

3. 排查jQuery命名冲突 #

如果确认jQuery加载成功还是报错，可能是其他脚本占用了$符号，替换为全写jQuery测试即可：

jQuery(document).ready(function () {
    jQuery('#ViewAllMatchTbl').DataTable();
});

4. 确认DataTable相关脚本加载正常 #

同样在网络面板检查datatables.js、dataTables.bootstrap5.js两个文件是否加载成功，没有404错误，且加载顺序符合「jQuery → bootstrap.bundle.js → datatables.js → dataTables.bootstrap5.js」的要求。

5. 可选样式顺序调整 #

当前样式引入顺序不会影响功能，但为了避免自定义样式被覆盖，建议调整为：先引入第三方基础样式（bootstrap、fontawesome、datatables等），再引入第三方组件样式（icheck、ionicons等），最后引入自定义业务样式。

内容的提问来源于stack exchange，提问作者Nguyen Tuan Anh