使用引导程序按rails中的列对表数据进行排序

Question

编辑：如果可能的话，我更愿意使用引导程序来实现此功能，因为我的项目中有引导程序。看来我可能只是缺少在我的 rails 项目中利用 bootstrap 的 javascript 的东西。

单击列名时，表格应按该列名对数据进行排序。下表是：

我尝试按照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 %>

Answer 1

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

1. 将 gem 'jquery-turbolinks' 添加到您的 Gemfile 以修复 turbolink javascript 问题和 bundle install

2. 将jquery.turbolinks 添加到 javascript 清单文件中：

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

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

4. 在app/assets/javascripts/shared/<whatever_you_want_to_call_it>.js 创建js 文件。如图所示使用$(document).ready 来修复turbo 链接问题。指定一个 IIFE（可选），然后在该 IIFE 中粘贴供应商代码：

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

5. 然后，只需将 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

快速 - sortTable.js

警告：如果您打算使用分页，此方法将不起作用。

更快的方法（需要零查询）涉及库sortTable.js。该网站在解释如何设置 HTML 文档方面做得很好。 （只需向列标题添加一些类。）您还可以启用不区分大小写的排序。

假设您使用的是 Rails 4，或者拥有 turbolinks gem，我强烈建议遵循detailed gist with instructions 在您的环境类型中设置sortTable.js。 （完整的讨论可以在我的Q&A on using turbolinks with sorttable.js找到。）

---

可靠 - 自定义控制器方法

警告：此方法要求对每个页面浏览至少进行一次查询。

此方法来自Railscast 228: Sortable Table Columns。阅读随附的代码几乎是您所需要的。此方法确实适用于分页。

如果您选择关注Railscast for pagination，只需在 Ajax 部分之前停止，因为所涉及的 Javascript 已被弃用。其次，注意该截屏视频中可能存在的 SQL 注入。谢天谢地，它解释了如何避免它。

Answer 3

使用 bootstrap-sass 和 bootstrap-table-rails 宝石：

Gemfile：

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

更新Gemfile后别忘了运行bundle。

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>

仅供参考，我的 gem 版本：

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

Answer 4

试试这个：

<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. 在您的 Gemfile 中添加 gem 'bootstrap-table-rails' 并运行 bundle install。
2. 在您的 application.js 中添加 require bootstrap-table。
3. 在您的 application.css 中添加 require bootstrap-table。
4. 将 data-toggle="table" 添加到您的表格标签中，例如<table data-toggle="table">。
5. 将 data-sortable="true" 添加到您的标签中，例如<th data-sortable="true">。如果您不想对任何特定列进行排序，请将此属性设为 false，例如<th data-sortable="false">