DataTables插件未运行

Question

我想将DataTables插件用于数据库中的过滤器，但是由于某种原因，它拒绝工作。 看起来很简单，导入几个脚本，运行一个简单的jquery函数，一切顺利。 我尝试使用CDN链接，但由于这些链接无效，因此将其保存在本地。 依然没有。

可能是因为我使用的是cshtml页面而不是常规的html之类的东西吗？ 我正在Visual Studio中运行.net核心c＃程序。

（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

下面有一个简单的数据表实现。 只需将您的代码放在表中即可满足您的要求。 首先尝试使用这些脚本，如果可以运行，然后将表的内容放入其中。 如果存在任何问题并且无法正常工作，则应检查来自模型的数据。

 $(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>