Плагин DataTables не работает

Question

Я хотел использовать плагин DataTables для фильтров в базе данных, но по какой-то причине он отказывается работать.Это казалось достаточно простым, импортируйте пару скриптов, запустите простую функцию jquery, и все готово.Я пытался использовать ссылки CDN, но так как они не работали, я сохранил их локально.Все еще ничего.

Возможно, потому что я использую страницы cshtml вместо обычного html или что-то еще?Я запускаю программу .net core c # в Visual Studio.

(ps, записи базы данных не на английском языке)

@model IEnumerable<Chronos.Domain.Model.Fonds>
@{
    ViewData["Title"] = "Overview";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link rel="stylesheet" type="text/css" href="~/css/table.css">

<script type="text/javascript" charset="utf8" src="~/js/Jquery3.3.1.js"></script>

<script type="text/javascript" src="~/tableScripts/TableScript.js"></script>


<script>
    $(document).ready(function () {
        $("#test").html("This is Hello World by JQuery");
        $('#fondsenTabel').DataTable();

        // Now here's an interesting bit. I added the little test Hello World thingy to check if the jQuery script even worked at all. 
        // Hello World appears if i put that line above .DataTable(), but it doesn't if it's on the line below.
    });

</script>

<div id="test">
</div>

<h2>Overview</h2>

<p>Hier komt de tabel met de fondsen</p>

@*<div id="customers">*@
<table id="fondsenTabel" class="display">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.naam)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.aanbieder)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.typologie)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.type)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ISIN)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.quotatie_overall)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.beheerder)
            </th>
            <th>Details</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            if (item.zichtbaar)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.naam)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.aanbieder)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.typologie)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.type)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ISIN)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.quotatie_overall)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.beheerder)
                    </td>
                    <td>
                        <a asp-area="" asp-controller="Demo" asp-action="Details">KBC Eco Fund - Impact Investing</a>
                    </td>
                </tr>
            }

        }
    </tbody>
</table>

Answer 1

Ниже у вас есть простая реализация datatable.Просто поместите ваш код в таблицу, чтобы соответствовать вашему запросу.Сначала попробуйте использовать эти сценарии, и если это сработает, поместите содержимое таблицы в это.Если есть какая-либо проблема и она не будет работать, вам следует проверить данные, поступающие с вашей модели.

$(document).ready(function() {
    $('#example').DataTable();
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>


<table id="example" class="display">
        <thead>
            <tr>
                <th>Name</th>
                <th>Surname</th>
                <th>Etc</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>First person name</td>
                <td>First person surname</td>
                <td>Etc Etc...</td>
            </tr>
            <tr>
                <td>Second person name</td>
                <td>Second person surname</td>
                <td>Etc Etc...</td>
            </tr>
             <tr>
                <td>Third person name</td>
                <td>Third person surname</td>
                <td>Etc Etc...</td>
            </tr>
         </tbody>
    </table>