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.

newUserNameHere · Accepted Answer · 2014-12-01 21:09:03Z

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 1, 2014 at 21:09

newUserNameHere

18.1k18 gold badges53 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marcel Gruber Over a year ago

This is pretty much exactly what I was thinking.

roxdurazo Over a year ago

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

Saurabh Mistry · Accepted Answer · 2021-04-11 13:53:52Z

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

maia · Accepted Answer · 2016-03-15 00:31:16Z

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, 2016 at 0:31

maia

4,4584 gold badges31 silver badges35 bronze badges

Comments

Ravistm · Accepted Answer · 2018-10-26 07:39:22Z

0

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

answered Oct 26, 2018 at 7:39

Ravistm

2,26326 silver badges26 bronze badges

Comments

Ajay Bhosale · Accepted Answer · 2019-03-11 08:59:44Z

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, 2019 at 8:59

Ajay Bhosale

1

Comments

Ad Kahn · Accepted Answer · 2020-05-27 12:29:40Z

0

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

answered May 27, 2020 at 12:29

Ad Kahn

5774 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related