Rails: Spice Up Your Tables with DataTables

DataTables.js is an excellent free jQuery plug-in that provides you with a way to spruce-up the HTML tables generated in your Rails application. It provides column-sorting, pagination, filtering, and limiting of results displayed. It is incredibly easy to install and get running. Here’s how I did it:

1. This is a jquery plug-in, so, if you’re like me and running on anything less than Ralis 3.1 you’ll need to download and copy jQuery into your application’s public/javascripts folder and add it to your application’s layout with a javascript_include_tag. If you’re using Rails 3.1 jQuery is already installed and you can move on to the next step.
2. Download the DataTables zip file and extract the /media/js/jquery.dataTables.js file to the applicable folder in your Rails application. For any version of Rails less than 3.1 this is the public/javascripts folder. For Rails 3.1 it could be any one of several places – you can figure that out.
3. Extract the demo-table.css file from the zip file’s /media/css folder to your application’s stylesheet folder. For Rails 3.0 and below applications you’ll need to add an include_stylesheet_tagto your application’s default layout. For Rails 3.1 see the instructions for using the asset pipeline.
4. Extract the contents of the zip file’s /media/images folder to the applicable folder in your application. In my 3.0.3 application that was public/images. If you’re using Rails 3.1 it will depend on where you decided to install the demo-tables.css stylesheet.
5. Open an index page for one your applications models. For the DataTables zero configuration all you need to do is:
   1. Add class=“display“ and id=“your-table-id“ to the <table> tag, e.g. <table class=“display“ id=“entry-table“>
   2. Wrap your table header tags with <thead> tags, e.g:

        <thead>
          <tr>
            <th>Date</th>
            <th>Course</th>
            <th>Time</th>
          </tr>
        </thead>

   3. Finally, wrap the remainder of your table with <tbody> tags:

        <tbody>
          <% @entries.each do |entry| %>
            <tr>
              <td><%= entry.shortEntryDate %></td>
              <td><%= entry.course.name %></td>
              <td><%= entry.formatted_elapsed_time %></td>
              <td>
                <% if current_user.miles %>
                  <%= convert_distance_to_miles(entry.course...) %>
                <% else %>
                  <%= entry.course.distance %>
                <% end %>
              </td>
              <td><%= entry.formatted_pace %></td>
              <td>
                <%= link_to 'View', entry %> |
                <%= link_to 'Edit', edit_entry_path(entry) %> |
                <%= link_to 'Delete', entry,... %>
              </td>
            </tr>
          <% end %>
        </tbody>

6. Finally, add the following to the top or bottom of your index.html.erb:

   <script>
     $(document).ready(function() {
       $('#your-table-id').dataTable();
     } );
   
   </script>

That’s it! You should know have a table that looks something like this:

DataTables has tons of customization options. Give it a try!