Adding data makes dataTables to disappear - Can't have data in my table otherwise dataTable doesn't work

Question

I am a beginner on Ruby on Rails and I am currently developing an application for which I would like to install the gem dataTables. Once I have installed the gem and followed the instructions nothing happen and there are no changes. My tables remain unchanged.

I am working with :

• ruby 2.1.5p273
• rails 4.2.3

These are the stages I followed :

1. I wrote in my Gemfile : gem 'jquery-datatables-rails, ~>3.3.0'
2. I run the command line :bundle install

The gem appears in the list of all gems installed.

3. I wrote in app/assets/javascripts/application.js :

//= require dataTables/jquery.dataTables

//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap

4. I wrote in app/assets/stylesheets/application.css :

*= require dataTables/jquery.dataTables

*= require dataTables/bootstrap/3/jquery.dataTables.bootstrap

5. Then I wrote in my file named index.html.erb:

<script type="text/javascript">

  $(document).ready(function(){
    $("#tabgerant").dataTable();
  })

</script>

<table id="tabgerant" class="table table-striped">
  <thead>
    <tr>
      <th>Nom</th>
      <th>Prenom</th>
      <th>Login</th>
      <th>Societe</th>
      <th>Commentaire</th>
      <th>Password</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @gerants.each do |gerant| %>
      <tr>
        <td><%= gerant.nom %></td>
        <td><%= gerant.prenom %></td>
        <td><%= gerant.login %></td>
        <td><%= link_to Societe.find(gerant.societe_id).nom, '#' %></td>
        <td><%= gerant.commentaire %></td>
        <td><%= gerant.password_digest %></td>
        
        <td><%= link_to 'Voir', gerant %></td>
        <td><%= link_to 'Modifier', edit_gerant_path(gerant) %></td>
        <td><%= link_to 'Supprimer', gerant, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

I stopped the web server and launched it again and nothing appeared. My table was exactly the same. No visible effects of dataTables.

I wondered wether I had installed the correct files or not. So I downloaded the version of dataTables directly on the official website and on their website they said to put two files so dataTables can work.

In app/assets/javascripts I created a folder named dataTables and I put in it all files with the extension .js

In app/assets/stylesheets I did the same with all the files with the extension .css

In app/assets/images I did also the same and I put in the folder dataTables all the pictures needed by dataTables.

Then I went to the files application.js and application.css and I created the routes to these files.

Here again nothing works. Would anyone have any idea about what is happening? I am a beginner so I may have not written this post correctly and I am sorry about it.

Thank you for your help and your time

I am still searching and I found that writing some javascript made some elements of gem dataTables to appear...But not everything.

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="app/assets/dataTables/media/css/jquery.dataTables.css">
  
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="app/assets/dataTables/media/js/jquery.js"></script>
  
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="app/assets/dataTables/media/js/jquery.dataTables.js"></script>

Can anyone explain where to install .js and .css files of the dataTables gem ? Thank you

Answer 1

I eventually find that removing this line made my DataTable to work:

<th colspan="3"></th>

And the corresponding lines to keep the right structure of the table :

<td><%= link_to 'Voir', gerant %></td>
        <td><%= link_to 'Modifier', edit_gerant_path(gerant) %></td>
        <td><%= link_to 'Supprimer', gerant, method: :delete, data: { confirm: 'Are you sure?' } %></td>