Функция фильтра DataTable не работает: Jquery

Question

Я использую синтаксис Razor для отображения вида. Я пытаюсь отфильтровать данные, которые у меня есть. Однако, даже при наличии обычного скрипта фильтр должен работать, но это не так. Я не уверен, в чем может быть причина.

Вот мой код:

jQuery(document).ready(function ($) {
        $('.table').DataTable(); // this provides a DataTable plugin feature that has search functionality, but for some reason it is not working
        //$('.hasTooltip').tooltip();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css" />

<table class="table table-hover" id="tblgrpDetail">
  <thead>
    <tr>
      <th>
        Name
      </th>

      <th>
        Address
      </th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody id="myTable">
    @foreach (var item in Model) {
    <tr>

      <td class="Name">
        <span>@item.Name</span> @Html.DropDownList("Name", (SelectList)ViewBag.objName, new { id = "Name", @class = "form-control JGID", style = "display:none; width:200px;" })
      </td>

      <td class="Address">
        <span>@item.Address</span> @Html.DropDownList("Address", (SelectList)ViewBag.objAddr, new { id = "Address", @class = "form-control Address", style = "display:none; width:200px;" })
      </td>
      <td>
        <a class="Edit btn btn-success hasTooltip" href="javascript:;" data-placement="bottom" title="Edit"><span><img src="~/Icons/icons8-edit-20.png" /></span></a>
        <a class="Delete btn btn-danger hasTooltip" href="javascript:;" data-placement="bottom" title="Delete"><span><img src="~/Icons/icons8-delete-trash-20.png" /></span> </a>
        <a class="Update btn btn-info hasTooltip" href="javascript:;" style="display:none" data-placement="bottom" title="Update"><span><img src="~/Icons/icons8-update-20.png" /></span> </a>
        <a class="Cancel btn btn-danger hasTooltip" href="javascript:;" style="display:none" data-placement="bottom" title="Cancel"><span><img src="~/Icons/icons8-cancel-20.png" /></span></a>
      </td>
    </tr>
    }
  </tbody>
</table>

Сама встроенная функция поиска по данным не работает. Я попытался найти в Интернете и ТАК для того же, но не смог найти правильный ответ.

Если вы можете сказать мне правильное направление, это было бы очень полезно.

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

Answer 1

Я обнаружил очень странное поведение метода DropdownListFor, не уверенный, является ли это ошибкой или подлинностью. Когда я заменяю это на разметку, это прекрасно работает, но не иначе. Я использовал разметку выбора вместо DropDownList, и это сработало!