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

Question

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.

score 25 · Accepted Answer · answered Dec 01 '14 at 21:09

25

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.

answered Dec 01 '14 at 21:09

newUserNameHere

17,348
18
49
79

1

This is pretty much exactly what I was thinking. – Marcel Gruber Mar 31 '15 at 06:35
I change vendor/assets/stylesheets/plugins/dataTables.bootstrap.css Replace 'background: url('../images/sort_desc_disabled.png') no-repeat center right;' with 'background: url('/assets/images/sort_desc_disabled.png') no-repeat center right;' – roxdurazo Apr 07 '17 at 23:16

score 1 · Answer 2 · answered Apr 11 '21 at 13:53

1. Download Image From Here :

https://cdnjs.com/libraries/datatables

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

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

score 0 · Answer 3 · answered Mar 15 '16 at 00:31

0

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.

answered Mar 15 '16 at 00:31

maia

3,910
4
27
34

score 0 · Answer 4 · answered Oct 26 '18 at 07:39

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

score 0 · Answer 5 · answered Mar 11 '19 at 08:59

0

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

answered Mar 11 '19 at 08:59

Ajay Bhosale

1

score 0 · Answer 6 · answered May 27 '20 at 12:29

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

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

6 Answers6