ruby-on-rails – 使用bootstrap在rails中按列对表数据进行排序

编辑：如果可能,我宁愿使用bootstrap来实现此功能,因为我在项目中有引导程序.好像我可能只是缺少一些东西来利用我的rails项目中的bootstrap的 javascript.

单击列名称时,表应按该列名对数据进行排序.以下是表格：

我尝试使用bootstrap对数据进行排序,遵循at this website所示的示例,但它对我不起作用.我错过了什么？

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

查看显示记录：

#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 %>

解决方法

感谢 Hunter Stevens的大量反馈.我找到的最佳选择是使用sorttable.js.我使用的流程如下：

>将gem’jquery-turbolinks’添加到您的Gemfile中以修复turbolink javascript问题和bundle install
>将jquery.turbolinks添加到javascript清单文件：

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

>去here to copy the code for sorttable.js
>在以下位置创建js文件：app / assets / javascripts / shared /< whatever_you_want_to_call_it> .js.使用$(document).ready如图所示修复turbo链接问题.指定IIFE(可选),然后将供应商代码粘贴到该IIFE中：

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

>然后,只需将可排序的类添加到表中,这使得所有列都可排序：

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