Ошибка «Дата не является функцией», когда макет больше не равен нулю - PullRequest
0 голосов
/ 08 апреля 2019

Для удобства я работал с "Layout = null", пока кодировал свою страницу.Хотя макет имеет нулевое значение, Datatable и страница в целом работают отлично.

Однако после удаления нулевых тегов макета и запуска макета начальной загрузки таблица данных больше не отображает эту ошибку HTML:

Uncaught 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>';
                    }
                }
            ]
        })

enter image description here enter image description here enter image description here

Ответы [ 2 ]

0 голосов
/ 13 апреля 2019

Так что я нашел ответ на это.И это было досадно просто!Был общий вид файла макета.Однажды я удалил таблицы стилей из представления и вместо этого поместил их в общий вид макета.Все заработало!В итоге это стало столкновением таблиц стилей.

0 голосов
/ 08 апреля 2019

Возможно, что сценарий из CDN еще не загружен к моменту загрузки DOM $(document).ready().

Вместо этого можно попробовать:

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

Другим вариантом будет использование атрибута defer в теге script.

Скрипты с атрибутом defer будут препятствовать запуску события DOMContentLoaded до тех пор, пока скрипт не загрузится и не завершит оценку.- Источник

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...