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; 
}