How to Initialize TableTools in Rails 4

Question

I can't seem to get tabletools to work at all in rails. I followed the instructions for setting up datatables at http://railscasts.com/episodes/340-datatables using the jquery-datatables gem. I'm new to coding so the answer might be simple, but I simply cannot figure it out.

Here is my applications.js:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require dataTables/jquery.dataTables
//= require dataTables/extras/TableTools
//= require dataTables/extras/ZeroClipboard
//= require_tree .

My application.css:

 *= require_self
 *= require dataTables/jquery.dataTables
 *= require dataTables/extras/TableTools
 *= require_tree .

And this is my index.html.erb:

<h1>Products</h1>

<script>
    $(document).ready( function () {
      $('#products').dataTable( {
        "sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
        "oTableTools": {
          "sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
          "aButtons": [
            "copy",
            "print",
            {
              "sExtends":    "collection",
              "sButtonText": 'Save <span class="caret" />',
              "aButtons":    [ "csv", "xls", "pdf" ]
            }
          ]
        }
      } );
  } );
</script>

<table id='products'>
  <thead>
    <tr>
      <th>Created</th>
      <th>Updated</th>
      <th>Product name</th>
      <th>Category</th>
      <th>Release date</th>
      <th>Price</th>
      <th>Buy</th>
      <th>Notes</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <% @products.each do |product| %>
      <tr>
        <td><%= product.created_at.strftime("%m/%d/%Y") %></td>
        <td><%= product.updated_at.strftime("%m/%d/%Y") %></td>
        <td><%= product.Product_Name %></td>
        <td><%= product.Category %></td>
        <td><%= product.Release_Date %></td>
        <td><%= product.Price %></td>
        <td><%= translate(product.Buy.class)%></td>
        <td><%= product.Notes %></td>
        <td><%= link_to 'Show', product %></td>
        <td><%= link_to 'Edit', edit_product_path(product) %></td>
        <td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>


<%= link_to 'New Product', new_product_path %>

As is, I get this error:

DataTables warning (table id = 'products'): Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy

-- I realize this is probably from doubling up on the initialization script and the table id. However, if I remove the table id, it removes all the sorting and searching features and I get just a plain text table. The initialization code by itself doesn't seem to make my table a datatable... but it's doing something or else I wouldn't be getting the errors.

Any ideas how to get this to work?

Thanks, Dina

score 0 · Answer 1 · answered Jul 22 '14 at 15:44

Try checking to see if the DataTable is initialized first:

$(document).ready(function() { 

  if ( !$.fn.dataTable.isDataTable( "#products" ) ) {

   $('#products').dataTable( {
    "sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "oTableTools": {
      "sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
      "aButtons": [
        "copy",
        "print",
        {
          "sExtends":    "collection",
          "sButtonText": 'Save <span class="caret" />',
          "aButtons":    [ "csv", "xls", "pdf" ]
        }
      ]
    }
   } );
 }
} );

How to Initialize TableTools in Rails 4

1 Answers1