ページごとに項目を表示するページ番号

Question

ページめくりのために宝石をページにするレールを使用しました。ユーザーがページごとに項目数を選択できるドロップダウンがあります。ページごとに多くのアイテムを表示するようにページングしたい。

このため、selectタグの変更アクションでビューファイルからjqueryを呼び出しています。

ビューコード：

%table.treeTable 
%tbody 
    - Ic.make_tree(@ics).values.each do |root| 
     %tr{:id => root.tree_id, :class => "root"} 
     %td= root.root_name 
     - if show_check_boxes 
      %td= check_box_tag "ic_glob", root.tree_id, false, :class => "ic_parent" 
     - root.suites.each do |suite| 
     %tr{:id => suite.tree_id, :class => "child-of-#{root.tree_id}"} 
      %td= suite.suite_name 
      - if show_check_boxes 
      %td= check_box_tag "ic_glob", suite.tree_id, false, :class => "ic_parent" 
     - suite.children.each do |case_item| 
      %tr{:id => case_item.tree_id, :class => "child-of-#{suite.tree_id}"} 
      %td= case_item.case_name 
      - if show_check_boxes 
       %td= check_box_tag "ic_glob", case_item.tree_id, false, :class => "ic_parent" 
      - case_item.children.each do |ic| 
      %tr{:id => ic.id, :class => "child-of-#{case_item.tree_id}"} 
       %td= link_to ic.name, edit_ic_path(ic.id) 
       - if show_check_boxes 
       %td= check_box_tag "ic_ids[]", ic.id, false 
    =will_paginate @ics 

Ajaxコード：アヤックスから

$('.ics_per_page').live('change',function(){ 
$.ajaxSetup({beforeSend: function(xhr) {xhr.setRequestHeader("X-CSRF-Token", $("meta[name='csrf-token']").attr("content")); }}); 
    value1=($(this).val()); 
    $.post('/ics/index', {ics_per_page:value1}); 
    return false; 
    }) 

私はインデックスコントローラを呼び出しています。コントロールはコントローラーの内部にありますが、リロードは起こっていません。

コントローラーコード：

def index 
    ics_per_page=params[:ics_per_page]||5 
    ics_per_page=ics_per_page.to_i 
    @ics = Ic.search(params[:root_name],params[:suite_name],params[:case_name],params[:name],'f').paginate(:per_page =>ics_per_page, :page => params[:all_ics]) 
    respond_to do |format| 
     puts "inside index" 
     format.html # index.html.erb 
     format.xml { render :xml => @ics } 
    end 
    end 

ここに私を助けてください。

ありがとう、 Ramya。

Answer 1

基本的にXHRリクエスト - >コントローラ - >アクション - >レンダリングビューを返すようにしました。

コントローラを呼び出す必要があります。これはあなたがすでにしていることです。

第2に、コントローラによって取得されたデータを使用して現在のページを更新する必要があります。このために、私はあなたのrespond_toを延長する：

JS要求はindex.jsをレンダリングすることを意味し、{ERB、RJS、...}ハンドラを。ここでは、ビューを更新するコードを記述します。レンダリングされた出力は、JavaScriptで戻り値として受け取るものです。

最後に、レスポンスを評価する必要があります。

ヒント：javascriptを使用してインデックスアクションを呼び出しています。 POSTではなくGETでこれを行う必要があります。

Answer 2

Ajaxリクエストはページをリロードしません。ページには目に見えないフォームがあり、価値の変化についてはバックグラウンドで提出してください。

ページには目に見えないフォームがあります。

<form action="/ics" method="get" style="display:none" id="change_number_of_ics"> 
    <input type="hidden" name="ics_per_page" id="num_of_items" value="" /> 
</form> 

は

$('.ics_per_page').live('change',function(){ 
    value1= $(this).val(); 
    $("#num_of_items").attr("value", value1); 
    $("form#change_number_of_ics").submit(); 
});