在Bootstrap模式中使用Kaminari分页

时间:2014-06-30 17:57:25

标签: ruby-on-rails twitter-bootstrap kaminari

我在使用我的Bootstrap模式处理Kaminari gem时遇到了一些困难。我知道它需要主要使用Ajax,但我不太清楚该怎么做。

具体来说,我有超过800个图像应该加载到模态中。但是,现在,所有这些图像都在同时加载,导致加载时间过长。

以下是我目前的情况:

new.html.erb

  # basic html items
 <%= render "image_modal" %>

_image_modal.html.erb

 <div class="modal fade" id="choosePicture" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
       <h4 class="modal-title">Choose Your Image</h4>
     </div>
     <div class="modal-body">
      <div class="row">
          <% @images_by_filename.each do |image|  %>
          <div class=" col-xs-3">
              <div class="thumbnail">
                <%= image_tag image.picture(:square), :title => image.name, :id => image.id, :image_url => image.picture(:thumb), :class => "list_thumb image-select style_image" %>
              </div>
          </div>
          <% end  %>
      </div>
  </div>
  <div class="modal-footer">
   <div class="form-group">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
   </div>
  </div>
</div><!-- /.modal-content -->

images_controller.rb

class ImagesController < ApplicationController
  def new
    @template = Template.new
    @groups = Group.all
    @images = @images_by_filename
    @template.template_assignments.build
  end
 end

我怎样才能将Kaminari合并到这个模态中?当我尝试实现分页时,最终会刷新整个页面,而不是仅仅在模态中。

对此的任何帮助都会很棒!

1 个答案:

答案 0 :(得分:0)

控制器和视图文件中缺少某些代码。

images_controller.rb

@images = @images_by_filename.page(params[:page]).per(number_of_records_per_page)

_image_modal.html.erb

= paginate @images

您可以参考http://railscasts.com/episodes/254-pagination-with-kaminari获取更多帮助。

希望这会对你有所帮助。