Cody Pritchard Cody Pritchard - 1 year ago 132
jQuery Question

Rails 4 - DataTable with pagination

I am trying to get a sortable html table with pagination working in my rails application. But nothing i do has any effect.

I am using rails 4.2.4 and foundation 6.

I have followed all the steps




Everyone of these makes it seem like the work to get this running is very simple.

I have the following:


gem 'jquery-datatables-rails', '~> 3.4.0'


//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require dataTables/
//= require jquery-ui
//= require autocomplete-rails
//= require foundation
//= require turbolinks
//= require_tree .


Inside my view i have:

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

<link rel="stylesheet" type="text/css" href=""/>

<script type="text/javascript" src=""></script>

<table id="jobsTable">
<th>Job ID</th>
<th>Created On</th>
<th colspan="2"></th>

<% @jobs.each do |job| %>
<td><%= %> </td>
<td><%="%I:%M %p, %b %d %Y") %></td>
<td><%= job.user.username %></td>
<% if %>
<td><%= %></td>
<% else %>
<td> N/A </td>
<% end %>
<% if job.subcontractor %>
<td><%= %></td>
<% else %>
<td> N/A </td>
<% end %>
<% if job.jobsite %>
<td><%= %></td>
<% else %>
<td> N/A </td>
<% end %>
<td><%= link_to 'Show', job %></td>
<!-- if current_user.admin %> -->
<!-- <td style="background: lightgray;"> link_to 'Destroy', job, method: :delete, data: { confirm: 'Are you sure?' } %></td> -->
<!-- end %> -->
<% end %>

But the table does not change no matter what.
This is the table currently:

enter image description here

And according to all the links i listed, with everything I have done, it should magically change to look like this, with the buttons and pagination:

enter image description here

Can anyone please help and tell me what I am doing wrong here? I have been searching for hours looking at examples and I have not been able to find out why this is not working.


I double checked my steps with the installation directions direct from their website and I still cannot see anything that I am doing wrong.

Any help is greatly appreciated.

Answer Source

You need to make two changes into your code to make it work :

  1. You have to remove your colspan from your <thead>, And the number of th and td should to match.

  2. Your <script> tag should be at the bottom of your page.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download