Sorting table data by columns in rails with bootstrap

Question

Change I would prefer to use loading for this function, if possible, since I have a boot file in my project. It seems like I could just miss something to use javascript bootstrap in my rails project.

When you click on a column name, the table should sort the data by the name of this column. The table below is:

I tried to sort the data using bootstrap following the examples below on this website , but it did not work 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 Record Display:

 #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 the many reviews from Hunter Stevens . The best option I've found for me is to use sorttable.js . The process I used was as follows:

• Add gem 'jquery-turbolinks' to your Gemfile to fix javascript turbolink error and bundle install

• 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 . 

• Go here to copy the code for sorttable.js

• Create a js file at: app/assets/javascripts/shared/<whatever_you_want_to_call_it>.js . Use $(document).ready as shown in the picture to fix the turbocharger problem. Specify IIFE (optional), then paste the vendor code inside this IIFE:

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

• Then just add the sortable class to your table, which makes all sortable columns:

   <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.

A faster way (which accepts null requests) includes the sortTable.js library. The website does an excellent job of customizing an HTML document. (Just add some classes to the column headings.) You can also include case-insensitive sorting.

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

---

Reliability - User Controller Methods

WARNING: this method requires at least one request per page view.

This method comes from Railscast 228: sortable table columns . Reading the attached code is all you need. This method works with pagination.

If you decide to follow Railscast for pagination , just stop in front of the Ajax part, since the involved Javascript is deprecated. Secondly, watch out for possible SQL injection in this screencast. Fortunately, it explains how to avoid this.

Answer 3

Using bootstrap-sass and bootstrap-table-rails :

Gemfile

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

Remember to run bundle after updating the 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 the following:

 <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

• Add the gem 'bootstrap-table-rails' to your Gemfile and run the package installation.
• Add the loading table to the application.js file.
• Add the loading table to the application.css file.
• Add toggle = "table" data to your table tag, for example. <table data-toggle="table"> .
• Add data-sortable = "true" to your tag, for example. <th data-sortable="true"> . Make this property false if you do not want to sort any particular column, for example. <th data-sortable="false">