DataTables not displaying bootstrap glyhpicons in Rails

Question

Since I give up adding DataTables 1.10.8 using Rails-assets or Bower in my Rails 4 project, I added the component directly in /vendor/assets/DataTables directory and edited in application.js:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require select2
//= require datatables  // This
//= require turbolinks
//= require_tree .

and application.css.scss

*= require_self
 *= require select2
 *= require datatables  // This
 *= require_tree .
 */

To test that DataTables I just enter to one my forms and with the Chrome console, I set a bootstrap class to a table, and converted to a DataTable with this:

$('table').DataTable( {
    dom: 'B<"clear">lfrtip',
    buttons: {
        name: 'primary',
        buttons: [ 'copy', 'csv', 'excel' ]
    }
} );

Apparently it works, but there's something missing, those tiny icons in the sort headers.

Note: I included a customized download from the DataTables website.

Update: Apparently I have a problem with the glyphicons, some font is missing or something. I'm currently using the gem 'bootstrap-sass', '~> 3.3.5'

user290499 · Answer 1 · 2015-08-15T16:48:20.483

0

Did you copy over the images into the asset folder? You will need to copy over the "vendor/assets/images/dataTables/{sort_asc.png|sort_both.png|sort_desc.png" files
You should try avoiding adding dataTable to all tables $('table'), does that, either bind it to a class (".dt") or id ("#dt")
The correct API is $('table').dataTable({}). Note the small case. "DataTable" returns the api object and not the DataTable object. But then obviously, It still works!

Ensure the application.js files has

//= require dataTables/bootstrap/{3 OR 2}/jquery.dataTables.bootstrap

And these files should be also placed within vendor/assets folder

Btw, did you try using the jquery-datatables-rails gem?

Add the following to your Gemfile

gem 'jquery-datatables-rails', '~> 3.3.0'

Run the following command in your project folder

rails generate jquery:datatables:install bootstrap2

or if you prefer bootstrap3

Ensure you add your Extra's in the application.js and css files, for e.g.

//= require dataTables/extras/dataTables.tableTools

Should be present in your application.js file and similarly your application.css should have the following:

 *= require dataTables/extras/dataTables.tableTools

edited Aug 15 '15 at 16:48

answered Aug 15 '15 at 16:29

user290499

1
1
4

Thanks, I'm going to try it. About jQuery-datatables-rails gem i was planning to use it, however, after watching the sources in its github directory i figure out that its using an 1.10.7, and I'm using the most recent version 1.10.8 of DataTables. Apparenty, buttons extension is not included – Mr_LinDowsMac Aug 15 '15 at 17:05
Mmmm... I think this won't work. `*= require dataTables/extras/dataTables.tableTools ` means that you're assuming that I'm using tableTools, which is not the case. That is being deprecated. I also get the generated download file from the DataTables site. – Mr_LinDowsMac Aug 15 '15 at 17:22
The "tableTools" is what has become "Buttons" extension. Other then "ColViz" extension tableTools has everything Buttons provides. – user290499 Aug 15 '15 at 17:31
yes, and I also included that in my download for the HTML5 buttons export... but the excel button doesn't work either :( – Mr_LinDowsMac Aug 15 '15 at 17:36
I haven't checked the new "Button" extension, but if it's the same code as tableTools, then you will need to ensure you are serving "/assets/dataTables/extras/swf/copy_csv_xls_pdf.swf" file. – user290499 Aug 15 '15 at 17:38
Just looked into the plugin extension documentation. Looks like the new Button plugin for excel does not work in Safari. Also, if you are using the excelhtml5, then you need https://stuk.github.io/jszip/ also in your project – user290499 Aug 15 '15 at 17:42
Not surprising. Safari is so delayed in support of HTML5. Perhaps is intentional because Apple don't want people to access to the iOS filesystem. – Mr_LinDowsMac Aug 15 '15 at 18:03

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

The only way that fixed was downloading a bootstrap package and copy the fonts into a fonts folder in vendor directory, and add the following described on this answer:

https://stackoverflow.com/a/20297523/598070

edited May 23 '17 at 11:45

Community

1
1

answered Aug 17 '15 at 18:43

Mr_LinDowsMac

2,644
9
56
75

score 0 · Answer 3 · answered Dec 20 '16 at 14:00

I simply copied the images to app/assets/images and created a workaround route for these specific image files like this:

 get '/assets/plugins/datatables/images/:name.:ext', to: redirect('/assets/%{name}.%{ext}'), constraints: { name: /.+/, ext: /(jpg|png|gif)/ }

Works fine with jquery-datatables-rails (3.4.0) and rails 5.0.0

score 0 · Answer 4 · answered Jan 21 '17 at 09:31

The reason why the icon is not shown is due to fonts. Glyphicons is not loaded.

I resolved with following code.

    diff --git a/app/assets/stylesheets/bootstrap_and_overrides.scss b/app/assets/stylesheets/bootstrap_and_overrides.scss
    index 2f5a9f9..0bbbcc8 100644
    --- a/app/assets/stylesheets/bootstrap_and_overrides.scss
    +++ b/app/assets/stylesheets/bootstrap_and_overrides.scss
    @@ -4,6 +4,7 @@
       Use Font Awesome icons (default)
       To use Glyphicons sprites instead of Font Awesome, replace with "require twitter-bootstrap-static/sprites"
       =require twitter-bootstrap-static/fontawesome
    +  =require twitter-bootstrap-static/sprites
       */
     .alert-notice {
       color: #3c763d;

DataTables not displaying bootstrap glyhpicons in Rails

4 Answers4