DataTables JQuery插件和Rails表样式

我上周刚拿起Ruby for Rails，我猜我的资产管道存在问题。 具体来说，我想覆盖Rails 4应用程序中DataTables表的默认样式，但更改custom.css.scss什么都不做。 样式显然来自dataTables / jquery.dataTables。 我所要做的就是对表格进行条纹处理，使交替的行具有不同的背景颜色，沿着以下行：

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

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

application.css：

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

注意：如果我删除了jquery.dataTables要求，我的custom.css.scss生效。

的Gemfile：

 # 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实际上在./app/assets和.app / public中搜索您在application.css文件中列出的任何内容。 诀窍是以两种方式之一获取jquery.datatables.css的副本：

1）在RoR应用程序中实现默认的dataTables表; 在浏览器中查看源代码; 单击jquery.datatables.css链接并复制+粘贴到编辑器中; 要么

2）下载DataTables的最新标准（非rails）分发，并在DataTables-xxx / media / css / jquery.datatables.css下找到jquery.datatables.css的副本。

通过替换修改application.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文件的位置必须与您在application.css文件中指定的内容一致，否则当Ruby on Rails无法找到指定的资产时，您将获得一个讨厌的错误页面。 我犯的错误是无法使application.css同意文件的实际位置。 如果我在这里找到jquery.datatables.css，还有其他样式表（在application.css中给出正确的行：

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

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

Answer 2

我认为问题在于您需要资产的顺序。 您应该在jquery.dataTables之后需要custom.css.scss 。 尝试将application.css更改为：

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

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

更新：

如果这不起作用，我认为你的CSS将有一些!important的，如下：

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