CODEWITHSUNDEEP
jqueryruby-on-railsrubyruby-on-rails-4datatables
newUserNameHere
newUserNameHere

Reputation: 18001

jquery-datatables-rails sort arrows not showing up in development environment

I have a new rails install. I followed the instructions on this page exactly: https://github.com/rweng/jquery-datatables-rails

When I try to view a datatable, I get these errors:

GET http://localhost:3000/images/sort_both.png 404 (Not Found)
GET http://localhost:3000/images/sort_asc.png 404 (Not Found)

In config/environments/development.rb I've tried changing the following settings:

config.assets.debug = false #and also tried true
config.serve_static_assets = true #and also tried false
config.assets.enabled = true

I've also tried running rake assets:precompile

Not sure what I'm missing here. Any help would be greatly appreciated.

Upvotes: 7

Views: 17780

Answers (6)

Saurabh Mistry
Saurabh Mistry

Reputation: 13679

1. Download Image From Here :

https://cdnjs.com/libraries/datatables

enter image description here

2. create datatable folder inside assets and put images inside it

enter image description here

3. in your style.scss or style.css add below code :

table.dataTable thead .sorting {
    background-image: url("./assets/datatable/sort_both.png");
}

table.dataTable thead .sorting_asc {
    background-image: url("./assets/datatable/sort_asc.png") !important;
}

table.dataTable thead .sorting_desc {
    background-image: url("./assets/datatable/sort_desc.png") !important;
}

table.dataTable thead .sorting_asc_disabled {
    background-image: url("./assets/datatable/sort_asc_disabled.png");
}

table.dataTable thead .sorting_desc_disabled {
    background-image: url("./assets/datatable/sort_desc_disabled.png");
}

Upvotes: 1

Ad Kahn
Ad Kahn

Reputation: 579

I had same problem and this is what I settled with 

<style>
    table.dataTable thead .sorting {
        background: url("/Content/DataTables/images/sort_both.png") no-repeat center right;
         } 
    table.dataTable thead .sorting_asc {
        background: url("/Content/DataTables/images/sort_asc.png") no-repeat center right;
        }
    table.dataTable thead .sorting_desc {
        background: url("/Content/DataTables/images/sort_desc.png") no-repeat center right;
       }
</style>

It just a quick fix without changing any thing in the supplied files. Dont forget to change
[ /Content/DataTables/images/ ]
accordingly

Upvotes: 0

Ajay Bhosale
Ajay Bhosale

Reputation: 1

i can find one more solution just add 2 pure white background .png imgaes in images folder of ui solution and save it as

sort_both.png ans sort_asc.png

basically this images are set the background to header of datatable

Upvotes: 0

Ravistm
Ravistm

Reputation: 2213

For me it worked just by changing the below:

background:url('../images/sort_desc.png')
background:url('../images/sort_asc.png')

to

background:url('/assets/sort_desc.png')
background:url('/assets/sort_asc.png')

NOTE: please make sure you add the images to assets/images folder

Upvotes: 0

maia
maia

Reputation: 4360

I had the same problem and fixed it using a different version of the jquery.dataTables.min.css file, where the images are written as strings rather than as references to a file.

Upvotes: 0

newUserNameHere
newUserNameHere

Reputation: 18001

Perhaps someone will present a better answer. This is how I fixed it.

I got rid of the gem. Downloaded the javascript and css files from the datatables website:

Put these files in vendor/assets/stylesheets and vendor/assets/javascripts respectively.

I downloaded the missing images from here and stuck them in my vendor/assets/images folder that I created.

I did a replace all on the text in jquery.dataTables.min.css and replaced "/images/" with "/assets/"

And that fixed it. Hope this helps someone.

Upvotes: 25

Related Questions