DataTables插件未运行

Question

I wanted to use the DataTables plugin for filters in a database, but for some reason it refuses to work. It seemed simple enough, import a couple of scripts, run a simple jquery function and you're good to go. I've tried using the CDN links, but since those didn't work I've saved them locally. Still nothing.

Is it perhaps because I'm using cshtml pages instead of regular html or something? I'm running a .net core c# program in Visual Studio.

(ps, the database records aren't in English)

@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

Below you have a simple implementation of datatable. Just put your code in table to match your request. First try with those scripts and if it will work then put content of your table in this. If there is any problem and will not work then you should check the data that come from your model.

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