Jatery Datatable, на который ссылаются только через CDN, работает не с файлами сценариев

Question

Я хочу назвать свой datatable, ссылаясь на соответствующие файлы jquery в MVC. Но когда я пытаюсь вызвать экземпляр dataTable, происходит сбой.

Ошибка в chrome показывает, что функция dataTable () не распознается или иногда не распознается jquery или $.

Ниже приведен мой код с CDN, который работает:

 <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>`<div style="width: 900px; border: 1px solid black; padding: 3px">
    <table id="datatable">
        <thead>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Gender</th>
                <th>Job Title</th>
                <th>Web Site</th>
                <th>Salary</th>
                <th>Hire Date</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var values in Model)
            {
                <tr>
                    <td>@values.Id</td>
                    <td>@values.FirstName</td>
                    <td>@values.LastName</td>
                    <td>@values.Gender</td>
                    <td>@values.JobTitle</td>
                    <td>@values.WebSite</td>
                    <td>@values.Salary</td>
                    <td>@values.HireDate</td>
                </tr>
            }
        </tbody>
        <tfoot>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Gender</th>
                <th>Job Title</th>
                <th>Web Site</th>
                <th>Salary</th>
                <th>Hire Date</th>
            </tr>
        </tfoot>
    </table>
</div>

. $ ( '# DataTable') DataTable ();

Теперь, если я вызову тот же код, ссылающийся на файлы сценариев dataTable, загруженные с помощью «Add -> Client Side Library» из Visual Studio и загружающие файлы cdnjs с возможностью регистрации данных, произойдет сбой.

Сбой следующего кода:

<link href="~/lib/datatable/css/datatable.min.css" rel="stylesheet" />`<script src="~/lib/datatable/js/datatable.jquery.min.js"></script>`<script src="~/lib/datatable/js/datatable.min.js"></script>
<div style="width: 900px; border: 1px solid black; padding: 3px">
<table id="datatable">
    <thead>
        <tr>
            <th>Id</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Gender</th>
            <th>Job Title</th>
            <th>Web Site</th>
            <th>Salary</th>
            <th>Hire Date</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var values in Model)
        {
            <tr>
                <td>@values.Id</td>
                <td>@values.FirstName</td>
                <td>@values.LastName</td>
                <td>@values.Gender</td>
                <td>@values.JobTitle</td>
                <td>@values.WebSite</td>
                <td>@values.Salary</td>
                <td>@values.HireDate</td>
            </tr>
        }
    </tbody>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Gender</th>
            <th>Job Title</th>
            <th>Web Site</th>
            <th>Salary</th>
            <th>Hire Date</th>
        </tr>
    </tfoot>
</table>

<script>
 $('#datatable').dataTable();
</script>

Любая помощь или предложения или идеи о том, как ссылаться на файлы jquery для данных в проекте MVC 5?.

Заранее спасибо !!! ..

Answer 1

Все вроде нормально. вам просто нужно добавить метод вызова данных в функцию готовности документа

<script>
$(function(){
  $("#datatable").dataTable();
})
</script>

После добавления функции готовности. убедитесь, что вы не загружаете JQuery дважды.

Также убедитесь, что вы ссылаетесь на действительный путь datatable.js.

Answer 2

Вам следует изменить версию jQuery на jQuery 1.11.3

https://datatables.net/blog/2015-04-30