快速 - sortTable.js

Question

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

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

enter image description here

我尝试使用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 %>

Answer 1

感谢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
```

然后，只需将类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，我强烈建议您<{3}}在您的类型环境中设置sortTable.js后强烈推荐。（可以在detailed gist with instructions找到完整的讨论。）

可靠 - 自定义控制器方法

警告：此方法要求每个页面视图至少有一个查询。

此方法来自Q&A on using turbolinks with sorttable.js。阅读附加代码几乎就是您所需要的。这个方法使用分页。

如果您选择关注Railscast 228: Sortable Table Columns，请在 Ajax部分之前停止，因为不推荐使用相关的Javascript。其次，请注意该截屏视频中可能的SQL注入。值得庆幸的是，它解释了如何避免它。

Answer 3

使用 bootstrap-sass ＆amp; 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>

仅供参考，我的宝石版本：

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

在Gemfile中添加 gem＆＃39; bootstrap-table-rails＆＃39; 并运行bundle install。
在application.js。

require bootstrap-table

在application.css中添加 require bootstrap-table 。
将 data-toggle =＆＃34; table＆＃34; 添加到您的表格标签，例如<table data-toggle="table">。
将 data-sortable =＆＃34; true＆＃34; 添加到您的标签，例如<th data-sortable="true">。如果您不想对任何特定列进行排序，请将此属性设为false <th data-sortable="false">

使用bootstrap按rails中的列对表数据进行排序

5 个答案:

快速 - sortTable.js

可靠 - 自定义控制器方法