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文件安装在我的应用程序的文件树，以便我可以编辑或替换它，或者如果它不是本地的，我可以在哪里安装自己的自定义文件以覆盖其规格？

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 /资产jquery.datatables.css样式表/数据表/ jquery.dataTables.css ，但Rails忽略它。这个想法来自this article，但无论是我误解了作者的意思，或者它在Rails 4中都不起作用。

Answer 1

有点搜索和实验，我能拿出正确的答案。

我在Ruby On Rails asset pipeline上读到了，并开始明白Sprockets实际上在./app/assets和.app/public中搜索application.css文件中列出的任何东西。诀窍是通过以下两种方式之一获取jquery.datatables.css的副本：

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

2）下载最新的标准（非轨道）的DataTables分配下找到数据表，X.X.X /媒体/ CSS/jquery.datatables.css jquery.datatables.css的副本。

修改您的应用程序。通过

*= require jquery.dataTables 

更换

*= require dataTables/jquery.dataTables 

现在，你可以自由地修改本地jquery.datatables.css的副本，以满足您的需求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数据表的第一步的指南，所以我保留了我的在这里研究一下，希望能节省一些时间

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 dataTables/jquery.dataTables后使用require_tree .。

UPDATE：

如果这不起作用，我觉得你的CSS会有一些!important的，就像这样：更

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

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