Getting DataTables to Work (Rails)

My personal cliff notes in getting this up and running ASAP (without worrying about AJAX or server-side processing). That come come later. I suppose it’s a problem that you want to have.

# add to gemfile and run bundle update
gem 'jquery-datatables-rails', git: 'git://github.com/rweng/jquery-datatables-rails.git'

//// Place in your application.js file

$(document).ready(function(){
  $("table[role='datatable']").each(function(){
    $(this).DataTable({
      processing: true      
    });
  });  
})

And add this to your application.scss file (your case may be different depending on the pre-processor you are using. ` @import “dataTables/jquery.dataTables” `

Now for the HTML table. Make sure that all the syntax is valid. Secondly, make sure that you have a thead AND a tbody elements. Lastly, we are using role=’datatable’ to make sure that the javascript acts on this baby.

<p id="notice"><%= notice %></p>
<h1> <%= @client.name %> Projects</h1>
<br>
<div class="table-responsive">
  <table class="table table-hover" role='datatable' >
    <thead>
      <tr>
        <th> Show me all panels </th>
        <th> Show only Panels With Errors </th>
      </tr>
    </thead>
    <tbody>
      <% @projects.each do |project| %>
        <tr>
          <td ><%= link_to(project.name + " (#{project.no})" , project_path(project)) %> </td>
          <td> <%= link_to("With Errors", panels_with_errors_project_path(project))  %> </td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>
<br>
<% if can? :new, @client.projects.new %>
  <%= link_to 'New Project', new_client_project_path(params[:client_id]) %>
<% end %>
<br>
<br>
<br>

Written on August 22, 2018