DataTables JQuery插件和Rails表样式 [英] DataTables JQuery plugin and Rails table styling

问题描述

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

I just picked up Ruby for Rails last week, and I'm guessing that I have some problems with the asset pipeline. Specifically, I want to override the default styling of the DataTables table in my Rails 4 application, but changing custom.css.scss does nothing. The styling is apparently coming from dataTables/jquery.dataTables. All I'm trying to do is to stripe the table so that alternating rows have different background colors, along the lines of:

tr.odd {
  background-color: pink;
}

tr.even {
  background-color: red;
}

此datatables.css文件确切地安装在应用程序的文件树中的什么位置，以便我可以对其进行编辑或替换，或者如果它不是本地文件，则可以在哪里安装自己的自定义文件以覆盖其规范?

Where, exactly, is this datatables.css file installed in my application's file tree so that I can edit or replace it, or if it's not local, where can I install my own custom file to override its specifications?

application.css:

application.css:

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

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

Note: If I remove the jquery.dataTables requirement, my custom.css.scss takes effect.

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中不起作用.

Just to note: I've tried to include a stylesheet called jquery.datatables.css under .app/assets/datatables/jquery.dataTables.css, but Rails just ignores it. The idea came from this article, but either I'm misinterpreting what the author is saying or it doesn't work in Rails 4.

推荐答案

再进行一些搜索和实验，我就能够找到正确的答案.

A bit more searching and experimentation and I was able to come up with the proper answer.

我阅读了 Ruby On Rails资产管道，开始了解到链轮实际上是在搜索您在./app/assets和.app/public中的application.css文件中列出的所有内容.技巧是通过以下两种方式之一获取jquery.datatables.css的副本:

I read up on the Ruby On Rails asset pipeline and began to understand that Sprockets actually searches for anything you list in your application.css file in both ./app/assets and .app/public. The trick is to obtain a copy of jquery.datatables.css in one of two ways:

1)在您的RoR应用中实现默认的dataTables表；在浏览器中查看源代码；单击jquery.datatables.css链接并将其复制并粘贴到编辑器中；或

1) implement a default dataTables table in your RoR app; view source in your browser; click on the jquery.datatables.css link and copy+paste into your editor; or

2)下载 DataTables 的最新标准(无轨)发行版，并找到jquery.datatables的副本.css在DataTables-xxx/media/css/jquery.datatables.css下.

2) download the latest standard (non-rails) distribution of DataTables and find a copy of jquery.datatables.css under DataTables-x.x.x/media/css/jquery.datatables.css.

通过替换来修改application.css文件

Modify your application.css file by replacing

*= require dataTables/jquery.dataTables

使用

*= require jquery.dataTables

现在，您可以根据需要自由修改jquery.datatables.css的本地副本.确保将其保存在Sprockets将搜索的两个位置之一(./app/public或.app/assets)中.就我而言，我发现将自定义的jquery.datatables.css文件放在此处:

Now you can freely modify your local copy of jquery.datatables.css to suit your needs. Make sure to save it at one of the two locations that Sprockets will search (./app/public or .app/assets). In my case, I found that placing my custom jquery.datatables.css file here:

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

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

agreed with this following line in my application.css file:

*= require jquery.dataTables

强制性要求CSS文件的位置与application.css文件中指定的位置一致，否则当Ruby on Rails找不到指定的资产时，您将得到一个讨厌的错误页面.我犯的错误是未能使application.css与文件的实际位置一致.如果我将Sprocket放在这里，Sprockets也会找到jquery.datatables.css以及其他样式表(在application.css中给出正确的行:

It's mandatory that the location of your css file agrees with what you specify in your application.css file or you're going to get a nasty error page when Ruby on Rails can't find the asset as specified. The error I made was in failing to make application.css agree with the actual location of the file. Sprockets will also find jquery.datatables.css if I locate it here, with the other stylesheets (given the proper line in application.css:

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

尽管最初使用!important css标志可以实现所需的功能，但是即使在很短的时间内，将代码撒满标志也变得难以管理.在数小时的搜索过程中，我从未设法找到针对Ruby on Rails定制DataTables的这一非常基础的第一步的指南，因此我在这里保留我的研究，希望它可以节省一些时间.

Although using the !important css flag initially allowed me to accomplish what I wished, sprinkling my code with the flag would have become unmanageable even in the very near term. In hours of searching, I never managed to find a guide to this very fundamental first step in customizing DataTables for Ruby on Rails, so I'm preserving my research here in the hope that it saves someone time.

这篇关于DataTables JQuery插件和Rails表样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！