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

Posted 2023-03-27

【中文标题】如何在 .NET Core MVC 中初始化或调用 Vanilla 数据表

【英文标题】：How to Initialize or call Vanilla Datatables in .NET Core MVC

【发布时间】：2022-01-16 06:29:39

【问题描述】：

我正在设计 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 索引页面中调用以下代码来初始化我的索引页面中的表格

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

也试过了

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

table 是我的表类名，datatable 是表的 id。但什么也没有出现。如果您需要任何其他详细信息，请告诉我。我在 MVC 架构中使用 .net 核心和引导程序。

编辑

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

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>

【问题讨论】：

这似乎与.net 无关，也与我看到的引导程序无关。因此，如果您删除标题中的这些标签和提及，它可能会更好。如果您还可以显示您的 html 代码，那将很有帮助。

@Achtung 我删除了引导标签，请注意我的项目在 .NET Core MVC 中，因此我包含了 .NET 核心标签，我需要知道如何在.net 核心应用程序。

您没有发布 HTML 源代码。您确定您的 HTML 元素具有相同的 ID 数据表吗？

【参考方案1】：

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

DataTable.ctor 中使用的值似乎是要绑定Vanilla-DataTables 的 HTML 表的类名。

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

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

那么你需要一个 HTML table 和一个名为 table 的 css 类：

<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

【讨论】：

非常感谢！用于分享示例。这使我找到了我的项目的解决方案。最终使用了同一个 Github 存储库中提到的简单数据表。感谢您为我指明正确的方向。

检查如何选择需要搜索的列。不知道如何自定义和选择可以搜索的列。

@ahp 如果答案对您有帮助：What should I do when someone answers my question?