布局不再为空时出现“数据表不是函数”错误答案

【问题标题】："Datatable is not a Function" Error When Layout is no longer null布局不再为空时出现“数据表不是函数”错误
【发布时间】：2019-04-08 15:52:00
【问题描述】：

为方便起见，我在编写页面时一直在使用“Layout = null”。虽然布局为空，但数据表和页面作为一个整体工作得很好。

但是，一旦删除了空布局标签并启动了引导布局，数据表就不再显示此 HTML 错误：

未捕获的 TypeError: $(...).DataTable 不是函数

非常感谢任何帮助！

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Users</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
</head>
<body>
<div style="width:90%; margin:0 auto" class="tablecontainer">
    <a class="popup btn btn-primary" href="/home/CreateUser/0" style="margin-bottom:20px; margin-top:20px">Add new User</a>
    <a class="popup btn btn-primary" href="/home/AddUserToSafe/0" style="margin-bottom:20px; margin-top:20px">Add User to Safe</a>
    <table id="CBR-User">
        <thead>
            <tr>
                <th>User ID</th>
                <th>Name</th>
                <th>Surname</th>
                <th>Department ID</th>
                <th>Rank</th>
                <th>Assigned Safes</th>
                <th>Email Address</th>
                <th>Password</th>
                <th>Add User to Safe</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
    </table>
</div>

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>

<script>
    $(document).ready(function () {
        var uTable = $('#CBR-User').DataTable({
            "ajax": {
                "url": '/Home/GetUser',
                "type": "get",
                "datatype": "json"
            },
            "columns": [

                { "data": "User_ID", "autoWidth": true },
                { "data": "FName", "autoWidth": true },
                { "data": "SName", "autoWidth": true },
                { "data": "Department_ID", "autoWidth": true },
                { "data": "Rank", "autoWidth": true },
                { "data": "Safe_ID", "autoWidth": true },
                { "data": "Email_Address", "autoWidth": true },
                { "data": "Password", "autoWidth": true },
                {
                    "data": "User_ID", "width": "50px", "render": function (data) {
                        return '<a class="popup" href="/home/SaveUser/' + data + '">Edit</a>';
                    }
                },
                {
                    "data": "User_ID", "width": "50px", "render": function (data) {
                        return '<a class="popup" href="/home/DeleteUser/' + data + '">Delete</a>';
                    }
                }
            ]
        })

【问题讨论】：

可以分享一下你的浏览器调试工具控制台显示的内容吗？
@BabakFakhriloo 添加
仅供参考的用户：76 点指向：var uTable = $('#CBR-User').DataTable({
页面完全加载后，在控制台尝试 $("#tableid").DataTable ... 看看它的提示。
可悲的是它提示完全相同..就在用户：格式化：76..我不知道为什么它突然不把它看作一个函数

标签： jquery html ajax asp.net-mvc

【解决方案1】：

可能是在使用$(document).ready() 加载 DOM 时，来自 CDN 的脚本尚未加载。

您可以尝试改用：

$(window).on('load', function() {
    // DataTable code here
});

另一种选择是在script 标签上使用defer 属性。

具有 defer 属性的脚本将阻止 DOMContentLoaded 事件触发，直到脚本加载并完成评估。 - Source

【讨论】：

很遗憾这次尝试没有运气
您应该在浏览器的开发者控制台中检查您的网络选项卡，看看 CDN 是否由于某种原因没有加载。我在本地和 codepen 上测试了代码，当我删除了其他脚本依赖项时它工作了。
我只添加了 defer 和建议的代码，而不是： $(document).ready(function () { （以及它上面的脚本标签）...但显示的错误是一个我刚刚上传的...
当然，但是网络选项卡显示什么？ jquery.dataTables.min.js 文件加载是否正确？
我添加了一个屏幕截图以防我遗漏了什么，但在网络方面看起来一切都很好？我必须承认这完全让我困惑！

【解决方案2】：

所以我找到了答案。它非常简单！有一个共享的布局视图文件。一旦我从视图中删除了样式表并将它们放在共享布局视图中。这一切都奏效了！它最终成为样式表的冲突。

【讨论】：

你确定吗？样式表对 JavaScript 没有影响
100%。我不认为样式表是核心错误，而是它们与共享布局视图发生冲突的事实，这肯定对代码的加载方式有影响。