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

Question

编辑:如果可能的话,我更愿意使用bootstrap来实现这个功能,因为我的项目中有bootstrap.好像我可能只是缺少一些东西来利用我的rails项目中的bootstrap的javascript.

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

我尝试使用bootstrap对数据进行排序,遵循本网站上显示的示例,但它对我不起作用.我错过了什么？

我的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. 添加宝石'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如图所示来修复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,我强烈建议您遵循详细的要点,说明如何sortTable.js在您的环境类型中进行设置.(关于使用turbolinks和sorttable.js的问答可以找到完整的讨论.)

可靠 - 自定义控制器方法

警告:此方法在每个页面视图上至少需要一个查询.

此方法来自Railscast 228:可排序表列.阅读附加代码几乎就是您所需要的.这种方法不使用分页工作.

如果您选择按照Railscast进行分页,只需在 Ajax部分之前停止,因为不推荐使用Javascript.其次,请注意该截屏视频中可能的SQL注入.值得庆幸的是,它解释了如何避免它.

Answer 3

使用bootstrap-sass和bootstrap-table-rails gems:

Gemfile:

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

不要忘记bundle在更新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>

仅供参考,我的宝石版本:

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