CODEWITHSUNDEEP
jqueryruby-on-railsdatatables
Kaitrono
Kaitrono

Reputation: 175

DataTables sorting icons don't show up without minified CSS

I came across something that I thought was very strange while installing the dataTables plugin in my app. I am using ruby on rails 4.2.

If i have only the minified or only the non-minified js and css jquery.dataTables files in my assets, the sorting icons do not load properly.
I get a RoutingError (No route matches [GET] "/images/sort_desc.png"). I've seen other people discuss this error, but have not actually seen a good solution for it. If I change the path to retrieve the images inside jquery.dataTables.css or the min version of the file, I still get the same error. The path in the error message does not change!

The strange thing, is if I use the min.css and regular js files, the sorting icons load properly! Recap: jquery.dataTables.min.css & jquery.dataTables.js : WORKS

jquery.dataTables.css & jquery.dataTables.js : DOES NOT WORK

jquery.dataTables.min.css & jquery.dataTables.min.js : DOES NOT WORK

jquery.dataTables.css & jquery.dataTables.min.js : DOES NOT WORK

I am putting these files inside vendor/assets/stylesheets, ../javascripts, ../images. What is going on here?

Upvotes: 2

Views: 4804

Answers (1)

Kaitrono
Kaitrono

Reputation: 175

I was able to figure this out. You need to override urls used in jquery.dataTables.css. I create a new css file also inside the vendor/assets/stylesheets and entered the following:

table.dataTable thead .sorting {
  background-image: image-url("sort_both.png");
}
table.dataTable thead .sorting_asc {
  background-image: image-url("sort_asc.png");
}
table.dataTable thead .sorting_desc {
  background-image: image-url("sort_desc.png");
}
table.dataTable thead .sorting_asc_disabled {
  background-image: image-url("sort_asc_disabled.png");
}
table.dataTable thead .sorting_desc_disabled {
  background-image: image-url("sort_desc_disabled.png");
}

This works assuming you placed your images in vendor/assets/images and you also import your css override file after the datatables css is imported.

Upvotes: 2

Related Questions