jquery - DataTables JQuery 插件和 Rails 表样式

标签 jquery css ruby-on-rails datatable

我上周刚刚学习了 Ruby for Rails,我猜 Assets 管道存在一些问题。具体来说,我想覆盖 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 要求,我的 custom.css.scss 就会生效。

gem 文件:

# 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 只是忽略它。这个想法来自this article ,但要么我误解了作者的意思,要么它在 Rails 4 中不起作用。

最佳答案

经过更多的搜索和实验,我找到了正确的答案。

我阅读了 Ruby On Rails asset pipeline并开始了解 Sprockets 实际上会搜索您在 ./app/assets 和 .app/public 中的 application.css 文件中列出的任何内容。诀窍是通过以下两种方式之一获取 jquery.datatables.css 的副本:

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

2) 下载最新标准(非rails)发行版DataTables并在 DataTables-x.x.x/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,Sprockets 也会找到它,以及其他样式表(在 application.css 中给出正确的行:

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

虽然使用 !important css 标志最初允许我实现我的愿望,但即使在短期内,在我的代码中添加该标志也会变得难以管理。在几个小时的搜索中,我从未找到关于为 Ruby on Rails 定制 DataTables 的非常基本的第一步的指南,因此我在这里保留我的研究,希望它可以节省某人的时间。

关于jquery - DataTables JQuery 插件和 Rails 表样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19991137/

相关文章:

javascript - 当我从<input type = "file">中选择文件时,如何获取文件名?

javascript - Cufon 文本 z-index(IE6 和 IE7 时尚的选择框错误)

javascript - 无法在 material-ui Button 组件中读取 null 的属性(读取 'pulsate')

ruby-on-rails - 使用 Postgres 按年分组

ruby-on-rails - 如何在Rails 4中使用Lucene/Solr?

jquery - Flexslider 居中问题

jquery - Chrome上的音频jQuery和currentTime

css - 有什么简单的方法可以让人们的谈话风格化吗?

html - Chrome 表格在换行时会扩展

ruby-on-rails - Rails - 本地机器上现有的开发 Postgres 数据库到 Heroku