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

Question

在我的应用程序中安装 dataTables 插件时，我遇到了一些我认为非常奇怪的事情。我正在使用 ruby​​ on Rails 4.2。

如果我的资源中只有缩小版或非缩小版的 js 和 css jquery.dataTables 文件，则排序图标无法正确加载。
我收到 RoutingError(没有路由匹配 [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 中。 这是怎么回事？

Answer 1

我能够弄清楚这一点。您需要覆盖jquery.dataTables.css中使用的url。我还在供应商/ Assets /样式表中创建了一个新的 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");
}

假设您将图像放置在供应商/ Assets /图像中，并且在导入数据表 css 后还导入了 css 覆盖文件，则此操作有效。