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

Sort table data by columns in rails with bootstrap

提问by Neil

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.

编辑：如果可能的话，我更喜欢使用引导程序来实现这个功能，因为我的项目中有引导程序。似乎我可能只是缺少一些东西来在我的 rails 项目中使用引导程序的 javascript。

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 中的相关宝石：

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

CSS:

CSS：

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

Javascript:

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

回答by Neil

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:

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

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

2. Add jquery.turbolinksto 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 jsfile at: app/assets/javascripts/shared/<whatever_you_want_to_call_it>.js. Use $(document).readyas 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 sortableto 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>
   

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. 去这里复制了sorttable.js代码

4. js在以下位置创建文件：app/assets/javascripts/shared/<whatever_you_want_to_call_it>.js. $(document).ready如图所示使用修复涡轮链接问题。指定一个 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>
   

回答by onebree

Fast - sortTable.js

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

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

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

假设您使用的是 Rails 4，或者有 turbolinks gem，我强烈建议您遵循详细的要点，其中包含有关sortTable.js在您的环境类型中设置的说明。（完整的讨论可以在我关于在 sorttable.js 中使用 turbolinks 的问答中找到。）

---

---

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 doeswork with pagination.

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

If you choose to follow Railscast for pagination, just stop beforethe 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.

如果您选择遵循Railscast 进行分页，请在 Ajax 部分之前停止，因为所涉及的 Javascript 已弃用。其次，注意该截屏视频中可能存在的 SQL 注入。值得庆幸的是，它解释了如何避免它。

回答by installero

Using bootstrap-sass& bootstrap-table-railsgems:

使用bootstrap-sass和bootstrap-table-railsgems：

Gemfile:

Gemfile：

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

Don't forget to run bundleafter you update your Gemfile.

bundle更新Gemfile后不要忘记运行。

app/assets/javascripts/application.js:

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:

app/assets/stylesheets/application.scss：

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

app/views/index.html.erb:

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

回答by Mayuresh Srivastava

1. Add gem 'bootstrap-table-rails'in your Gemfile and run bundle install.
2. Add require bootstrap-tablein your application.js.
3. Add require bootstrap-tablein 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">

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 标签，例如<th data-sortable="true">. 如果您不想对任何特定列进行排序，请将此属性设为 false，例如<th data-sortable="false">

回答by Sheharose

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>