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>