我正在为我的 ASP.NET MVC 程序使用 DataTables 插件。该表显示没有任何 CSS。为啥？

Posted 2023-03-27

【中文标题】我正在为我的 ASP.NET MVC 程序使用 DataTables 插件。该表显示没有任何 CSS。为啥？

【英文标题】：I'm using a DataTables plugin for my ASP.NET MVC program. The table displays without any CSS. Why?我正在为我的 ASP.NET MVC 程序使用 DataTables 插件。该表显示没有任何 CSS。为什么？

【发布时间】：2020-11-25 02:39:21

【问题描述】：

我已经为这个问题困扰了 DAYS 天，这是不得已而为之。

我正在学习一门课程，其中讲师让我们使用 DataTables 从数据库中提取用户列表。该插件正确地从我的数据库中提取数据，并且该表的功能似乎正在工作。问题是这张桌子很丑陋，而且几乎无法使用。

我不知所措，因为我已确保我的代码模仿了视频课程中的所有内容。我什至在 GitHub 中分析了我在他旁边的代码。

我什至确保将他的版本号用于插件，因为我相信该课程是在 2016-2017 年录制的。我考虑过我正在使用 Visual Stdio 2019 的事实，而他没有。另外，我记得几年前有一次大型引导更新。 （DataTables 使用引导程序）

我将在下面显示一些代码，但这里是这个项目的两个 repos（Vidly）： My Repo | Instructor's Repo

由于这显然是一个 CSS 问题，我查看了我是如何导入我的 css 文件的。我在 App_start 文件夹中的 BundleConfig 文件中使用了一个包：

但和老师写的一模一样，一模一样。

最后，这是与第一张图片相关的代码，即包含相关表格的页面：

我迷路了。

编辑： 昨晚我在 BundleConfig 文件中弄乱了我包含的文件，并将 dataTables 切换到 bootstrap 4 并得到了更理想的结果：

如您所见，这绝对是布局更好，并且具有所需的尺寸，但悬停的行和某些文本的颜色仍然关闭且不吸引人。

【参考方案1】：

如果您的 Bootstrap 版本是 4，那么您需要为 DataTables 加载 *.bootstrap4.css / *.bootstrap4.js 文件（而不是为 Bootstrap 3 加载 *.bootstrap.*）。

修改更新

看起来您可能还在加载 jquery.dataTables.css 文件（说明是分页中的间隙）？你可以删除它。应该只加载其中一个样式文件。

顺便说一句，您学习的教程是什么？

【讨论】：

很高兴你提到了这一点！昨晚我又在摆弄它，并按照你的建议做了。我得到了一个非常幽默的结果。由于这是一门有趣的课程，我可能会继续前进。但是在将文件切换到 bootstrap 4 之后，表格现在位于正确的空间中并且使用了正确的尺寸，但是字体错误，并且其他事情似乎不对。我正在用图片添加对原始问题的编辑