Question

我有两个表与has_and_belongs_to_many关系，项目和类别。

我在我的views / projects / new.html.erb中列出了我的所有项目记录，如下所示：

<% @projects.each do |project| %>
  <tr class="project <% project.categories.all.each do |cat| %><%= cat.name %> <% end %>">
     <td><a href='project/<%= project.id %>'><%= project.filename %></a></td>
 <td><%= project.author %>
 <td><% project.categories.all.each do |cat| %><%= cat.name %>, <% end %></td>
  </tr>
<% end %>

并定义了几个link_to远程链接，如下所示：

<div class="filterBy">SORT BY:</div>
<div class="filterBy"><%= link_to "Category", :update => "projects", :url => { :action => "sortTable", :filter => "Category" }, :remote => true %></div>                                        
<div class="filterBy"><%= link_to "Author", :update => "projects", :url => { :action => "sortTable", :filter => "Author" }, :remote => true %></div>
<div class="filterBy"><%= link_to "Date", :update => "projects", :url => { :action => "sortTable", :filter => "Date" }, :remote => true %></div>

在我的projects_controller中我有

def sortTable 
  @projects = Project.find(:all, :order => params[:filter])
end

当我点击链接时，没有任何反应。我究竟做错了什么？我希望它在不刷新页面的情况下进行更新。如果需要，我的routes.rb看起来像

Docside::Application.routes.draw do
  resources :projects
  resources :categories
  #get "home/index"
  root :to => "projects#new"
  match 'project/new',:controller=>"projects",:action=>"create"
  match "project/:id", :controller => "projects", :action=>"download"
end

Answer 1

在您的代码中，您只是为了获取已排序的数据而发送远程服务器请求。这将通过许多请求终止服务器。由于ur list page的主要要求是在不刷新页面的情况下对数据进行排序，因此可以使用数据表。使用数据表的示例页面 -

添加到您的appliation.js

//= require jquery.dataTables.min

用户控制器中的

def index
  @users = User.all #collect all the users
end

列表/索引视图中的

%table#users
   %thead
     %tr
       %th User Name
       %th User Age
   %tbody
   %tfoot

:javascript 
  var users_list = true;
  var users = #{@users.to_json};  #convert the object collection to json

ur users.js.coffee文件中的

if users_list?
  usersColumnDefs = [ { "bSearchable": true, "bSortable": true, "bVisible": true, "aTargets": [ 0, 1 ] }, { "sClass": "user-name", "aTargets": [ 0 ] }, { "sClass": "user-age", "aTargets": [ 1 ] } ]

  data = $.map(users, (user) ->
    return [[ user.name, user.age ]]
  )

  $('#users').dataTable
    "bSort": false,
    "bPaginate": false,
    "sDom": sDom
    "aaData": data
    "aoColumnDefs": usersColumnDefs

另见 What is the advantage of using jquery DataTables for large databases?

在link_to click事件上排序表

1 个答案: