FooTable doesn't work in ruby on rails project

Question

I'm trying to using FooTable in a ruby on rails project (I've never used FooTable before) but I can't make it work.

I've inserted gem 'footable-on-rails' in my gemfile (and ran bundle install)

I've inserted footable.js in app/vendor/assets/javascript and also in app/assets/javascript (which is the best/right location?)

I've inserted footable.core.css in app/vendor/assets/stylesheet and also in app/assets/stylesheet

I've created this file called footable_init.js

$(document).ready(function() 
{
    $("table").footable();
});

I also changed my application.js file to:

    //= require turbolinks
    //= require bootstrap.min
    //= require footable-on-rails
    //= require jquery
    //= require jquery-ui
    //= require jquery_ujs

//= require_tree .

And my application.css

 *= require bootstrap.min
 *= require footable-on-rails
 *= require_tree .
 *= require_self
 */

Note I'm also using bootstrap.

Finally my view looks like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>App</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

        <%= stylesheet_link_tag 'footable.core.css' %>
  <%= javascript_include_tag 'footable.js', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'footable_init.js', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'jquery.js', 'data-turbolinks-track' => true %>

    </head>
    <body>
        <table class="table">
        <thead>
                <tr>
                        <th>Name</th>
                        <th data-hide="tablet,phone">Age</th>
                </tr>
         </thead>
        <tbody>
            <tr>
                <td>Luke</td>
                <td>45</td>
            </tr>
            <tr>
                <td>Amy</td>
                <td>28</td>
            </tr>
            <tr>
                <td>Carl</td>
                <td>25</td>
            </tr>
        </tbody>
        </table>
    </body>     
</html>

But when I pass to phone or tablet resolution I see both column. What am I missing?

I thought it would have been easy to include FooTable in my rails project but it's taking me too much time. Thank in advance.

also, you don't have to insert the JS and CSS files manually since the gem does this for you. Delete the files and see if that helps — davegson, Sep 17 '15 at 08:39

davegson · Answer 1 · 2015-09-17T09:09:30.467

0

You added footable.js three times instead of once. The gem already includes the JavaScript by adding require 'footable-on-rails' in your application.js. The same goes for your CSS files.

There is no need to add them both in the app or the vendor directory. Remove those files and see if that helps.

Also, you have to include your application files. According to the asset pipeline docs add

<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>

to your application layout.

edited Sep 17 '15 at 09:09

answered Sep 17 '15 at 08:43

davegson

8,205
4
51
71

Do I also have to remove footable.core.css files from app and vendor directory? – splunk Sep 17 '15 at 08:47
Yes, the same goes for CSS – davegson Sep 17 '15 at 08:49
It still doesn't work. Is it necessary to include all those javascript files in my view file? – splunk Sep 17 '15 at 08:55
remove those lines as well, you cannot include what doesn't exist - instead include the application files, I updated my answer – davegson Sep 17 '15 at 09:09

FooTable doesn't work in ruby on rails project

1 Answers1