如何使用will_paginate gem实现ajax分页

Question

我will_paginate在我的ROR项目中使用gem 来显示页面中的记录.

我想在不重新加载整个页面的情况下加载下一页ajax.

我在网上找到了一些例子,但它们对我不起作用.

这该怎么做？

Answer 1

使用以下内容创建一个新助手(例如app/helpers/will_paginate_helper.rb):

module WillPaginateHelper
  class WillPaginateJSLinkRenderer < WillPaginate::ActionView::LinkRenderer
    def prepare(collection, options, template)
      options[:params] ||= {}
      options[:params]['_'] = nil
      super(collection, options, template)
    end

    protected
    def link(text, target, attributes = {})
      if target.is_a? Fixnum
        attributes[:rel] = rel_value(target)
        target = url(target)
      end

      @template.link_to(target, attributes.merge(remote: true)) do
        text.to_s.html_safe
      end
    end
  end

  def js_will_paginate(collection, options = {})
    will_paginate(collection, options.merge(:renderer => WillPaginateHelper::WillPaginateJSLinkRenderer))
  end
end

然后在您的视图中使用此标记进行ajax分页:

<%= js_will_paginate @recipes %>

请记住,分页链接将包含URL的现有参数,您可以将其排除,如下所示.这是标准的分页功能:

<%= js_will_paginate @recipes, :params => { :my_excluded_param => nil } %>

希望能解决你的问题.

更新1:在我发布此解决方案的原始问题中添加了有关其如何工作的说明.

更新2:我已经使Rails 4兼容remote:true链接并将帮助方法重命名为js_will_paginate.

Answer 2

嘿,如果你想分页产品,那么试试这个:

应用程序/控制器/ products_controller.rb

def index
  @products = Product.paginate(page: params[:page], per_page: 10)
end

意见/产品/ index.html.erb

<div class = "sort_paginate_ajax"><%= render 'products' %></div>

意见/产品/ _products.html.erb

<% @products.each do |product| %>
# your code
<% end %>
<%= will_paginate @products %>

意见/产品/ index.js.erb的

$('.sort_paginate_ajax').html("<%= escape_javascript(render("products"))%>")

资产/ Java脚本/ application.js中

$(function() {
  $(".sort_paginate_ajax th a, .sort_paginate_ajax .pagination a").on("click", function(){
    $.getScript(this.href);
    return false;
  });
});

所以首先我们在Product上为所有产品调用paginate方法,这里将根据选项设置偏移量,params[:page]并且将通过per_page选项设置限制.我们也渲染products部分,每次打开其他页面时都会渲染.

在@products您想要的部分调用,然后will_paginate应用方法 @products,它还创建params[:page]在控制器中使用.

现在响应ajax请求呈现带有我们创建的部分div类的内容sort_paginate_ajax.

还要在所有a标签的文件加载捕获脚本上发出请求ajax请求div.sort_paginate_ajax,并返回false.

现在将使用ajax请求调用页面

我希望这会对你有所帮助.

Answer 3

除先前答案外。

代码字符串：

$(".sort_paginate_ajax th a, .sort_paginate_ajax .pagination a").on("click", function(){

用字符串替换：

$(".sort_paginate_ajax").on("click", ".pagination a", function(){

onclick事件仅适用于已经存在的元素。因此，对于新出现的链接，需要将父级“ .sort_paginate_ajax”的委托单击事件委托给子级“ .pagination a”。

Answer 4

你可以只使用 JQuery：

控制器：

def index
  @posts = Post.paginate(:page => params[:page])      

  respond_to do |format|
    format.html
    format.js
  end
end

然后在 index.html.erb 中：

<div id="post-content", posts: @posts >
  <%= j render 'post_content' %>
</div>

在部分“_post_content.html.erb”中：

<%= will_paginate @posts %>
<% @posts.each do |post| %>
  <p><%= post.content %></p>
<% end %>

分页.js：

$(document).ready(function() {
  $('.pagination > a').attr('data-remote', 'true');
});

index.js.erb：

$('#post-content').html("<%= j render 'post_content' %>")

确保添加

$('.pagination > a').attr('data-remote', 'true');

再次在您的 JS 模板 (index.js.erb) 中，因此它会在 Ajax 运行时再次设置链接数据远程。