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.

Answer 1

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.

FooTable doesn't work in ruby on rails project

Question

1 answers

solution1
0 2015-09-17 08:43:01

FooTable doesn't work in ruby on rails project

Question

1 answers

solution1 0 2015-09-17 08:43:01

solution1
0 2015-09-17 08:43:01