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>

DataTables插件未运行

1 个答案: