Rails 4.0.2 and Foundation 5.0.2

elricstorm commented 10 years ago

All of the instructions work fine but when I first load the page that contains the datatable, it just shows a normal table. If I hit F5 after and reload the page, the datatable then loads properly. However, the pagination at the bottom shows text instead of images.

I use a simple method helper to load the datatable in the head. However, I also cannot use SPaginationType foundation and have to use full numbers instead. When using foundation pagination type the entire table disappears.

def jqtable(element_id)
    content_for(:head) {
      "<script type=\"text/javascript\" charset=\"utf-8\">
      $(document).ready(function() {
        $('##{element_id}').dataTable({
          \"sPaginationType\": \"foundation\", <== this by itself does nothing
          \"sPaginationType\": \"full_numbers\"  <== using this 
        });
      });
    </script>".html_safe
    }
end

Application.js contains

//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.foundation
//= require foundation
//= require turbolinks

$(function(){ $(document).foundation(); });

Application.css contains

 *= require_self
 *= require foundation_and_overrides
 *= require coftheme
 *= require site
 *= require dataTables/jquery.dataTables.foundation
 *= require home

index with the user table shows:

<% jqtable('user') %>

<div class="row">
  <div class="large-12 columns">
    <div class="userdiv centered">
      <h1>Current Users</h1>

      <table cellpadding="0" cellspacing="0" border="0" width="100%" class="display" id="user">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th># of Signins</th>
            <th>Provider</th>
            <th>UID</th>
            <th>Last Signed In</th>
            <th>IP Address</th>
          </tr>
        </thead>
        <tbody>
          <% @users.each do |user| %>
          <tr class="gradeX">
            <td class="center"><%= user.id %></td>
            <td class="center"><%= user.name %></td>
            <td class="center"><%= user.email %></td>
            <td class="center"><%= user.sign_in_count %></td>
            <td class="center"><%= user.provider %></td>
            <td class="center"><%= user.uid %></td>
            <td class="center"><%= user.last_sign_in_at %></td>
            <td class="center"><%= user.last_sign_in_ip %></td>
          </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  </div>
</div>

The head tag contains:

<!-- Head Section -->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%= content_for?(:title) ? yield(:title) : @site_title %></title>
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <%= stylesheet_link_tag  "application" %>
  <%= javascript_include_tag "vendor/modernizr" %>
  <%= javascript_include_tag "jquery" %>
  <%= yield(:head) %>
  <%= csrf_meta_tag %>
</head>
<!-- /end Head -->

I have tested with jquery in the head and out of the head before the body. Both do not work. Foundation is then loaded at the bottom before the body per the new revision in 5.0.x.

elricstorm commented 10 years ago

The following fix : https://github.com/rweng/jquery-datatables-rails/pull/77

.. fixed the pagination issue I was having.

However, the page still has to be refreshed after loading in order to show all the datatables components.

elricstorm commented 10 years ago

The issue with the page having to be refreshed was due to Turbolinks. Turbolinks does not play nice with Rails 4 and DataTables. I'm looking into other avenues, maybe Pjax. I commented out the turbolinks gem and removed the require from my javascript. With Fix #77 and this fix, my datatables is now working fine.

OscarBarrett commented 10 years ago

@elricstorm Turbolinks triggers page:load instead of ready, binding to that event as well as ready might fix your issue.

ricardodovalle commented 10 years ago

@elricstorm It is working? Can I close the issue?

elricstorm commented 10 years ago

I do not use Turbolinks any longer so the issue is fixed for me. I do not know if Turbolinks still causes an issue with this gem.

ricardodovalle commented 10 years ago

@elricstorm I don't know too, because i do not use Turbolinks. I will close the issue, because i am trying to clean the repository issues. If anyone got the same trouble, they can reopen.

Thanks.

ricardodovalle commented 10 years ago

@elricstorm if you are using Foundation, i proposed some changes to @cavalryjim at #83 Updating the datatables plugin files for Foundation 4 . If you help too, i will appreciate.

Like:
Foundation 4: javascripts/foundation/4 and stylesheets/foundation/4
Foundation 5: javascripts/foundation/5 and stylesheets/foundation/5

Thank you very mutch

rweng / jquery-datatables-rails

Rails 4.0.2 and Foundation 5.0.2 #81