CODEWITHSUNDEEP
jqueryruby-on-railswill-paginate
ramya
ramya

Reputation: 928

show items per page with will paginate

I have used the rails will paginate gem for pagination.I have a drop down which allows users to select number of items per page. I want my pagination to show that much items per page.

For this I am calling a jquery from my view file with change action on the select tag.

View code:

%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 code:

$('.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;
  })

From the ajax I am calling the index controller. The control goes inside the controller, but the reload is not happening.

Controller code:

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

Please help me out here.

Thanks, Ramya.

Upvotes: 0

Views: 777

Answers (2)

Anand
Anand

Reputation: 10400

Ajax requests won't reload a page. Have an invisible form in the page and submit it in the background on change of value.

Have an invisible form in the page.

<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>

Write a jquery callback like

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

Upvotes: 1

pdu
pdu

Reputation: 10413

Okay, so basically: XHR request -> controller -> action -> rendered view as return value.

You need to call your controller. This is what you do already.

Second, the data retrieved by the controller should be used to update the current page. For this, I would extend your respond_to with: 

respond_to do |format|
  format.js
end

Means that JS requests will render an index.js.{erb,rjs,...} handler. In this, you write your code to update the view. The rendered output is what you are going to receive as return value in your javascript.

Last, you need to evaluate the response.

Hint: You are calling your index action via javascript. You should do this with GET and not with POST.

Upvotes: 1

Related Questions