Sort table data by columns in rails with bootstrap

Question

Edit: I would prefer to using bootstrap for this functionality if possible since I have bootstrap in my project. It seems like I might just be missing something to utilize bootstrap's javascript within my rails project.

When the column name is clicked, the table should sort the data by that column name. Below is the table:

I attempted to sort the data with bootstrap, following the examples shown at this website, but it wasn't working for me. What am I missing?

Relevant gems in my Gemfile:

#Gemfile
gem 'bootstrap-sass'
gem 'autoprefixer-rails'

CSS:

#app/assets/stylesheets/application.css.scss
@import "bootstrap-sprockets";
@import "bootstrap";
/*
 *= require_tree .
 *= require_self
 */

Javascript:

#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

View displaying records:

#app/views/index.html.erb
<h4>Listing Users</h4>

<table class=" table table-striped" data-sort-name="name" data-sort-order="desc">
  <thead>
    <tr>
      <th data-field="name" data-sortable="true">Name</th>
      <th data-field="age" data-sortable="true">Age</th>
    </tr>
  </thead>

  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.age %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New User', new_user_path %>

Answer 1

Thanks to a lot of feedback from Hunter Stevens. Best option I found for me was to use sorttable.js. Process I used was the following:

1. Add gem 'jquery-turbolinks' to your Gemfile to fix turbolink javascript issue and bundle install

2. Add jquery.turbolinks to javascript manifest file:

   #app/assets/javascripts/application.js
   //= require jquery
   //= require jquery_ujs
   //= require jquery.turbolinks
   //= require bootstrap-sprockets
   //= require turbolinks
   //= require_tree .
   

3. Go here to copy the code for sorttable.js

4. Create js file at: app/assets/javascripts/shared/<whatever_you_want_to_call_it>.js. Use $(document).ready as shown to fix turbo link problem. Specify an IIFE (optional) then paste the vendor code within that IIFE:

   $(document).ready(function(){
     (function vendorTableSorter(){ 
       /* paste all the vendor code here */
     }());
   });// end document.ready
   

5. Then, simply add the class sortable to your table,which makes all the columns sortable:

   <table class=" table table-striped sortable">
     <thead>
       <tr>
         <th>Name</th>
         <th>Age</th>
       </tr>
     </thead>
   
    <tbody>
      <% @users.each do |user| %>
        <tr>
         <td><%= user.name %></td>
         <td><%= user.age %></td>
       </tr>
      <% end %>
    </tbody>
   

Answer 2

Fast - sortTable.js

WARNING: if you plan to use pagination, this method will not work.

The faster way (that takes zero queries) involves the library sortTable.js. The website does a great job explaining how to set your HTML document up. (Simply add some classes to column-headers.) You can also enable case-insensitive sorting.

Assuming you are using Rails 4, or have the turbolinks gem, I highly recommend following a detailed gist with instructions on setting up sortTable.js in your type on environment. (Full discussion can be found at my Q&A on using turbolinks with sorttable.js.)

---

Reliable - custom controller methods

WARNING: this method requires at least one query on every page view.

This method comes from Railscast 228: Sortable Table Columns. Reading the attached code is pretty much all you need. This method does work with pagination.

If you choose to follow Railscast for pagination, just stop before the Ajax part, as the Javascript involved is deprecated. Second, watch out for possible SQL injection in that screencast. Thankfully, it explains how to avoid it.

Answer 3

Using bootstrap-sass & bootstrap-table-rails gems:

Gemfile:

gem 'bootstrap-sass'
gem 'autoprefixer-rails' # i'm not sure whether this is relevant
gem 'bootstrap-table-rails'

Don't forget to run bundle after you update your Gemfile.

app/assets/javascripts/application.js:

 //= require bootstrap-sprockets
 //= require bootstrap-table
 //  # Replace below with desired locale if needed
 //= require locale/bootstrap-table-ru-RU

app/assets/stylesheets/application.scss:

@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap-table";

app/views/index.html.erb:

<table data-toggle="table">
  <thead>
    <tr>
      <th data-sortable="true">Name</th>
      <th data-sortable="true">Age</th>
    </tr>
  </thead>

  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.age %></td>
      </tr>
    <% end %>
  </tbody>
</table>

FYI, my gem versions:

bootstrap-sass-3.3.5.1
bootstrap-table-rails-1.8.2.1

Answer 4

Try this:

<table class=" table table-striped" data-sort-name="name" data-sort-order="desc">
<thead>
  <tr>
    <th data-field="name" data-sortable="true">Name</th>
    <th data-field="age" data-sortable="true">Age</th>
  </tr>
</thead>

 <tbody>
   <% @users.each do |user| %>
    <tr>
      <td><%= user.name %></td>
      <td><%= user.age %></td>
    </tr>
  <% end %>
 </tbody>
</table>

Answer 5

1. Add gem 'bootstrap-table-rails' in your Gemfile and run bundle install.
2. Add require bootstrap-table in your application.js.
3. Add require bootstrap-table in your application.css.
4. Add data-toggle="table" to your table tag e.g. <table data-toggle="table">.
5. Add data-sortable="true" to your th tag e.g. <th data-sortable="true">. Make this property false if you don't want to sort any particular column e.g. <th data-sortable="false">