如何在 .NET Core MVC 中初始化或调用 Vanilla 数据表

Question

我正在使用以下方法设计 cshtml 页面根据此处给出的说明，https://github.com/Mobius1/Vanilla-DataTables

我已经适当地添加了 CSS 和 JS 文件，

CSS

<link href="https://unpkg.com/vanilla-datatables@latest/dist/vanilla-dataTables.min.css" rel="stylesheet" type="text/css">

JS

<script src="https://unpkg.com/vanilla-datatables@latest/dist/vanilla-dataTables.min.js" type="text/javascript"></script>

我试图通过在我的 cshtml 索引页中调用以下代码来初始化我的索引页中的 table

<script>
var table = new DataTable("table");
</script>

也试过

<script>
var table = new DataTable("#datatable");
</script>

其中 table 是我的 table class 名称，数据 table 是 table 的 ID。但是什么也没有出现。如果您需要任何其他详细信息，请告诉我。我在 MVC 架构中使用 .net 核心和 bootstrap。

编辑

根据提供的答案，我最终使用来自同一 Github 存储库中引用的简单数据table作为解决方案，这是香草数据的最新迭代table小号：

https://github.com/fiduswriter/Simple-DataTables

并在 cshtml 页面底部使用以下脚本进行初始化：

<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest"></script>
<script>
    // Simple Datatable
    var mytable = document.querySelector('#datatable');
    var dataTable = new simpleDatatables.DataTable(mytable,{
    
//Enter any additional config details required here if required. Else Leave Blank

    });
</script>

Answer 1

您链接到的 Vanilla-DataTables 存储库有几个链接，其中包含使用其脚本的示例。

DataTable .ctor 中使用的值似乎是 HTML table(s) 的 class 名称以绑定 Vanilla-DataTables。

因此，在您的示例中，如果您使用：

<script>
var table = new DataTable("table");
</script>

然后你需要一个 HTML table 和一个 css class 命名为 table:

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Ext.</th>
            <th>City</th>
            <th data-type="date" data-format="YYYY/MM/DD">Start Date</th>
            <th>Completion</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>Unity Pugh</td><td>9958</td><td>Curicó</td><td>2005/02/11</td><td>37%</td></tr>
        <tr><td>Theodore Duran</td><td>8971</td><td>Dhanbad</td><td>1999/04/07</td><td>97%</td></tr>
        <tr><td>Kylie Bishop</td><td>3147</td><td>Norman</td><td>2005/09/08</td><td>63%</td></tr>
        <tr><td>Alisa Horn</td><td>9853</td><td>Ucluelet</td><td>2007/01/11</td><td>39%</td></tr>
        <tr><td>Zelenia Roman</td><td>7516</td><td>Redwater</td><td>2012/03/03</td><td>31%</td></tr>
    </tbody>
</table>

来源：Vanilla-DataTable Demos > Default Setup

如何在 .NET Core MVC 中初始化或调用 Vanilla 数据表

How to Initialize or call Vanilla Datatables in .NET Core MVC

javascript

datatables

asp.net-core-mvc

.net-core

asp.net-core

编辑