如何在 Ruby on Rails 上使用 will_paginate gem 实现 Ajax

Question

我想在我的 ruby​​ on rails 项目上实现 Ajax。我目前使用 will_paginate gem。每当我单击下一页时，整个页面都会重新加载，这是我不希望发生的。我怎样才能防止这种情况？我找到了similar question，但它对我不起作用。我猜是因为我使用的是 Rails 5.2.2？我不确定。

我的 index.html.erb 看起来像这样：

 <div class="row justify-content-center align-items-center">
       <div class="page_info">
        <h5><%= page_entries_info @imports %></h5>
       </div>
 </div>
 <div class="row justify-content-center align-items-center">
       <div class="page_info">
        <h5><%= will_paginate @imports, :container => false %></h5>
       </div>
 </div>

这是我的 controller.rb 中的代码：

class ImportsController < ApplicationController
  def index
     @imports = Import.all
     @imports = Import.paginate(:page => params[:page], :per_page => 5)   
  end

Answer 1

要使用 AJAX 而非页面刷新进行分页，您需要将 data-remote="true" 添加到所有分页链接。

data-remote="true" 是一个 Rails 帮助器，它将导致服务器将请求解释为 JS 而不是 HTML。

第一步，新建助手：

module RemoteLinkPaginationHelper
  class LinkRenderer < WillPaginate::ActionView::LinkRenderer
    def link(text, target, attributes = {})
      attributes['data-remote'] = true
      super
    end
  end
end

其次，在application_helper中添加paginate方法。

module ApplicationHelper
  def paginate(collection, params= {})
    will_paginate collection, params.merge(:renderer => RemoteLinkPaginationHelper::LinkRenderer)
  end
end

然后，你可以替换这个：

<div class="row justify-content-center align-items-center">
  <div class="page_info">
    <h5><%= will_paginate @imports, :container => false %></h5>
  </div>
</div>

用这个：

<div class="row justify-content-center align-items-center">
  <div class="page_info">
    <h5><%= paginate @imports, :container => false %></h5>
  </div>
</div>

我从这个 GitHub Snippet 获得了这些步骤：https://gist.github.com/jeroenr/3142686