Cody Pritchard Cody Pritchard - 1 month ago 21
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


here: https://github.com/rweng/jquery-datatables-rails

here: https://datatables.net

here: http://datatables.net/dev/foundation.html


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

I have the following:

Gemfile:

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


Application.js:

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

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


Inside my view i have:

<script>
$(document).ready(function() {
$('#jobsTable').dataTable();
} );
</script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/zf/jq-2.2.3/dt-1.10.12/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/zf/jq-2.2.3/dt-1.10.12/datatables.min.js"></script>

<table id="jobsTable">
<thead>
<tr>
<th>Job ID</th>
<th>Created On</th>
<th>User</th>
<th>Company</th>
<th>Subcontractor</th>
<th>Jobsite</th>
<th colspan="2"></th>
</tr>
</thead>

<tbody>
<% @jobs.each do |job| %>
<tr>
<td><%= job.id %> </td>
<td><%= job.date.strftime("%I:%M %p, %b %d %Y") %></td>
<td><%= job.user.username %></td>
<% if job.company %>
<td><%= job.company.name %></td>
<% else %>
<td> N/A </td>
<% end %>
<% if job.subcontractor %>
<td><%= job.subcontractor.name %></td>
<% else %>
<td> N/A </td>
<% end %>
<% if job.jobsite %>
<td><%= job.jobsite.name %></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 %> -->
</tr>
<% end %>
</tbody>
</table>


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.

Update:

I double checked my steps with the installation directions direct from their website https://datatables.net/manual/installation and I still cannot see anything that I am doing wrong.

Any help is greatly appreciated.

Answer

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.

Comments