0

プロジェクトとカテゴリの has_and_belongs_to_many 関係を持つ 2 つのテーブルがあります。

次のように、views/projects/new.html.erb にすべての Project レコードをリストします。

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

1 に答える 1

0

あなたのコードでは、並べ替えられたデータを取得するためだけにリモート サーバー リクエストを送信しています。これにより、多数のリクエストでサーバーが強制終了されます。リストページの主な要件は、ページを更新せずにデータをソートすることであるため、データテーブルを使用できます。データテーブルを使用したサンプルページ -

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

あなたの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

また 、大規模なデータベースに jquery DataTables を使用する利点は何ですか?も参照してください。

于 2012-10-08T07:11:33.163 に答える