没有缩小的 CSS，DataTables 排序图标不会显示

Posted 2023-05-09

【中文标题】没有缩小的 CSS，DataTables 排序图标不会显示

【英文标题】：DataTables sorting icons don't show up without minified CSS

【发布时间】：2016-12-10 16:33:39

【问题描述】：

在我的应用程序中安装 dataTables 插件时，我遇到了一些我认为很奇怪的东西。我在 Rails 4.2 上使用 ruby​​。

如果我的资产中只有缩小或只有非缩小的 js 和 css jquery.dataTables 文件，则排序图标无法正确加载。 我得到一个RoutingError (No route matches [GET] "/images/sort_desc.png")。我见过其他人讨论这个错误，但实际上并没有看到一个好的解决方案。 如果我更改路径以检索 jquery.dataTables.css 中的图像或文件的最小版本，我仍然会收到相同的错误。错误信息中的路径没有改变！

奇怪的是，如果我使用 min.css 和常规 js 文件，排序图标会正确加载！ 回顾： jquery.dataTables.min.css & jquery.dataTables.js ：工作

jquery.dataTables.css & jquery.dataTables.js ：不起作用

jquery.dataTables.min.css & jquery.dataTables.min.js ：不起作用

jquery.dataTables.css & jquery.dataTables.min.js ：不起作用

我将这些文件放入vendor/assets/stylesheets、../javascripts、../images。 这是怎么回事？

【问题讨论】：

您是在生产模式下运行它吗？如果是这样，请确保预编译资产。

我目前只是在开发中运行它。此外，默认情况下，rails 在 vendor/assets 下的所有目录中添加文件。如果我在控制台中运行Rails.application.config.assets.paths，我可以看到正在添加/vendor/assets/images、/vendor/assets/stylesheets 和/vendor/assets/javascripts。

在视图中尝试image_tag("sort_desc.png")。 （通常在 DEV 中，资产位于 /assets/image.png、/assets/javascript.js 等处。

jquery.datatTables.min.js 是复制意大利面错字，是吗？我认为这不是来自您的实际代码。

@RaVeN 如果我在任何视图中使用该图像标签路径，它确实有效。但是，在jquery.dataTables.css 或 min 版本中更改路径无效。 Rails 仍然报告我上面提到的错误，并在“/images/sort_desc.png”中查找它。不知道为什么

【参考方案1】：

我能够弄清楚这一点。您需要覆盖jquery.dataTables.css 中使用的网址。我还在供应商/资产/样式表中创建了一个新的 css 文件，并输入了以下内容：

table.dataTable thead .sorting 
  background-image: image-url("sort_both.png");

table.dataTable thead .sorting_asc 
  background-image: image-url("sort_asc.png");

table.dataTable thead .sorting_desc 
  background-image: image-url("sort_desc.png");

table.dataTable thead .sorting_asc_disabled 
  background-image: image-url("sort_asc_disabled.png");

table.dataTable thead .sorting_desc_disabled 
  background-image: image-url("sort_desc_disabled.png");

假设您将图像放置在 vendor/assets/images 中，并且在导入数据表 css 后还导入 css 覆盖文件，则此方法有效。