JQuery Datatables в ASP. NET (...). DataTables не является функцией - PullRequest
Новая
       41

JQuery Datatables в ASP. NET (...). DataTables не является функцией

0 голосов
/ 18 марта 2020

Я хочу использовать JQuery datatables в моем файле cs html, но получаю ошибку: $ (...). DataTable не является функцией.

Вот что я делаю: 

 @model IEnumerable<VannNettAdmin.Models.Classification.blabla>

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

<head>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="http://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">

<script type="text/javascript">
$(document).ready( function () {
    $('#test').DataTable();
});
</script>
</head>
<body>
  <h2>Index</h2>
  <table id="test" class="table table-bordered table-striped cf">
     <thead class="cf">
       <tr>
          <th>
            @Html.DisplayNameFor(model => model.blabla)
          </th>
      </tr>
   </thead>
<tbody>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.blabla)
        </td>
    </tr>
  }
</tbody>

Мой файл макета: https://paste.ubuntu.com/p/Kvm3n2VXx7/

Ответы [ 2 ]

0 голосов
/ 18 марта 2020 
<script type="text/javascript">
$(document).ready( function () {
    $('#test').DataTable();
});
</script>

Удалите свой скрипт из тега head и добавьте его до окончания тега body. Кроме того, убедитесь, что jQuery не загружается дважды или более на странице.

0 голосов
/ 18 марта 2020

В вашем файле макета у вас уже есть тег head и body, не рекомендуется дублировать эти элементы. Вы также должны использовать сценарии @rendersection для добавления файлов сценариев из представления в макет. Выполните следующие действия:

  1. Добавьте это в конце тега заголовка в файле макета 
@RenderSection("styles", required: false)
Удалите тег body, head из файла просмотра. Удалите JQUERY из файла просмотра, не дублируйте, они могут иметь конфликтующие функции. Использовать @section scripts { ... } и @section styles { ... } для размещения файлов вида в указанной позиции c в файле макета.

Это должен быть ваш полученный файл вида. 

@model IEnumerable<VannNettAdmin.Models.Classification.blabla>

@{ Layout = "_LayoutFileName"; }
@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>
<table id="test" class="table table-bordered table-striped cf">
   <thead class="cf">
      <tr>
         <th>
            @Html.DisplayNameFor(model => model.blabla)
         </th>
      </tr>
   </thead>
   <tbody>
      @foreach (var item in Model) {
         <tr>
            <td>
               @Html.DisplayFor(modelItem => item.blabla)
            </td>
         </tr>
      }
   </tbody>
</table>

@section styles{
   <link href="http://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
}

@section scripts{
   <script src="http://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"> 
   </script>

   <script type="text/javascript">
      $(document).ready( function () {
         $('#test').DataTable();
      });
   </script>
}

mData с неопределенной ошибкой вызван неравным числом th и td.

. Поэтому, если вы добавляете td, вы должны также добавить соответствующий th; Если у вас есть 2 td, требуется, чтобы у вас также было 2 th. 

<table id="test" class="table table-bordered table-striped cf">
     <thead class="cf">
       <tr>
          <th>
            @Html.DisplayNameFor(model => model.blabla)
          </th>
          <th>
            Options
          </th>
      </tr>
   </thead>
   <tbody>
   @foreach (var item in Model) {
      <tr>
         <td>
            @Html.DisplayFor(modelItem => item.blabla)
         </td>
         <td>
            @Html.ActionLink("Edit", "Edit", new { climatezoneId = item.ClimateZoneId})
         </td>
       </tr>
    }
</tbody>
</table>
...