DataTables JQuery 插件和 Rails 表样式

Question

我上周刚拿起Ruby for Rails，我猜我在资产管道方面遇到了一些问题。具体来说，我想在我的 Rails 4 应用程序中覆盖 DataTables 表的默认样式，但更改 custom.css.scss 没有任何作用。样式显然来自dataTables/jquery.dataTables。我所要做的就是对表格进行条带化，以便交替行具有不同的背景颜色，如下所示：

tr.odd {
  background-color: pink;
}
tr.even {
  background-color: red;
}

这个 datatables.css 文件究竟安装在应用程序的文件树中的什么位置，以便我可以编辑或替换它，或者如果它不是本地的，我可以在哪里安装我自己的自定义文件来覆盖其规范？

应用.css：

*= require_self
*= require_tree .
*= require jquery.ui.core
*= require jquery.ui.theme
*= require dataTables/jquery.dataTables

注意：如果我删除 jquery.dataTables 要求，我的自定义.css.scss 将生效。

宝石文件：

# Use jquery as the JavaScript library
gem 'jquery-rails'
# JQuery UI
gem 'jquery-ui-rails'
# Datatables JQuery plugin
gem 'jquery-datatables-rails', git: 'git://github.com/rweng/jquery-datatables-rails.git'

编辑：

请注意：我试图在.app/assets/datatables/jquery.dataTables.css下包含一个名为jquery.datatables.css的样式表，但Rails只是忽略了它。这个想法来自这篇文章，但要么我误解了作者所说的内容，要么它在 Rails 4 中不起作用。

Answer 1

经过更多的搜索和实验，我能够想出正确的答案。

我阅读了Ruby On Rails资产管道，并开始理解Sprockets实际上搜索您在应用程序中列出的任何内容.css./app/assets和.app/public文件中的文件。诀窍是通过以下两种方式之一获取jquery.datatables的副本.css：

1） 在您的 RoR 应用程序中实现默认的数据表表;在浏览器中查看源代码;点击jquery.datatables.css链接，复制+粘贴到你的编辑器中;或

2） 下载 DataTables

的最新标准（非 rails）发行版，并在 DataTables-x.x.x/media/css/jquery.datatables.css 下找到 jquery.datatables 的副本.css。

通过替换来修改应用程序.css文件

*= require dataTables/jquery.dataTables

跟

*= require jquery.dataTables

现在，您可以自由修改jquery.datatables的本地副本.css以满足您的需求。确保将其保存在 Sprockets 将搜索的两个位置之一（./app/public 或 .app/assets）。就我而言，我发现将我的自定义jquery.datatables.css文件放在这里：

.app/assets/datatables/jquery.datatables.css

同意我application.css文件中的以下行：

*= require jquery.dataTables

css文件的位置必须与您在应用程序.css文件中指定的位置一致，否则当Ruby on Rails找不到指定的资产时，您将获得一个令人讨厌的错误页面。我犯的错误是未能提出申请.css同意文件的实际位置。如果我在这里找到jquery.datatables.css Sprockets也会找到它，以及其他样式表（在应用程序中给出正确的行.css：

.app/assets/stylesheets/jquery.datatables.css

尽管最初使用 !important css 标志可以让我完成我的愿望，但即使在短期内，用标志洒在我的代码中也会变得难以管理。在几个小时的搜索中，我从未设法找到为Ruby on Rails定制DataTables的这一非常基本的第一步的指南，所以我在这里保存我的研究，希望它能节省一些时间。

Answer 2

我相信

问题出在您要求资产的顺序上。您应该在jquery.dataTables后要求您custom.css.scss。尝试将应用程序更改为.css：

*= require_self
*= require jquery.ui.core
*= require jquery.ui.theme
*= require dataTables/jquery.dataTables
*= require_tree .

如您所见，我们在*= require dataTables/jquery.dataTables后使用require_tree .。

更新：

如果这不起作用，我认为您的 css 会有一些!important，如下所示：

tr.odd {
  background-color: pink !important;
}
tr.even {
  background-color: red !important;
}