CODEWITHSUNDEEP
jqueryruby-on-railspaginationdatatables
Cody Pritchard
Cody Pritchard

Reputation: 695

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.

Upvotes: 0

Views: 2990

Answers (2)

Hardik Kanjariya ツ
Hardik Kanjariya ツ

Reputation: 636

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.

Upvotes: 1

Ishtiaque05
Ishtiaque05

Reputation: 451

http://railscasts.com/episodes/240-search-sort-paginate-with-ajax?autoplay=true Hope it shows how the a page can be paginated, sorted without loading the whole document.

Upvotes: 0

Related Questions