1

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

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:

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

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'

Edit:

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.

MarsAtomic
  • 10,436
  • 5
  • 35
  • 56

2 Answers2

4

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

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) 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) 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.

Modify your application.css file by replacing

*= require dataTables/jquery.dataTables

with

*= require jquery.dataTables

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

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

*= require jquery.dataTables

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

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.

MarsAtomic
  • 10,436
  • 5
  • 35
  • 56
1

I believe that the problem is with the order that you are requiring your assets. You should require your custom.css.scss after jquery.dataTables. Try to change your application.css to:

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

As you can see, we are using require_tree . after the *= require dataTables/jquery.dataTables.

UPDATE:

If this doesn't work,I think your css will have some !important's, like this:

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

tr.even {
  background-color: red !important;
}
Leonardo Barbosa
  • 1,258
  • 8
  • 13
  • I moved the tree requirement to the bottom. What you said makes a lot of sense, however... the row background-color remains the datatables default. – MarsAtomic Nov 15 '13 at 00:59
  • I was just investigating that when you updated, and adding !important flags does indeed cause the specifications in custom.css.scss to be applied. While flagging items works, there's something a bit kludgey about it, and I'd rather not throw myself into a technological debt so early into my Rails experience by adopting workarounds. There must be a more elegant solution that my limited understanding of the Rails 4 asset pipeline prevents me from reaching. Upvoting you for effort. A last ditch solution is still a solution, even if it's not ideal. – MarsAtomic Nov 15 '13 at 01:06