显示每页的项目并进行分页

Question

我使用了 Rails will paginate gem 进行分页。我有一个下拉菜单，允许用户选择每页的项目数。我希望我的分页每页显示那么多项目。

为此，我从视图文件中调用 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;
  })

我从ajax 调用索引控制器。控件进入控制器内部，但未发生重新加载。

控制器代码：

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

请帮帮我。

谢谢， 拉姆亚。

Answer 1

好的，基本上：XHR 请求 ->控制器->行动->渲染视图作为返回值。

您需要致电您的控制器。这就是你已经在做的事情。

其次，控制器检索到的数据应该用于更新当前页面。为此，我将扩展你的respond_to：

respond_to do |format|
  format.js
end

意味着JS请求将渲染一个index.js.{erb,rjs,...}处理程序。在此，您编写代码来更新视图。渲染的输出是您将在 javascript 中作为返回值收到的内容。

最后，您需要评估响应。

提示：您正在通过 javascript 调用索引操作。您应该使用 GET 而不是 POST 来执行此操作。

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>

编写一个 jquery 回调，例如

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