Skip to content

Adding AJAX to will_paginate

Ronald Chan edited this page Mar 20, 2012 · 11 revisions

This is the recommended way to add AJAX to will_paginate, and assumes that you have already installed AJAX Pagination. Some steps could be skipped, but would also miss some highly recommended features.

Suppose your view contains:

<!-- /app/views/objects/index.html.erb -->
<%= will_paginate @objects %>
<% objects.each do |object| %>
  ...
<% end %>

Move that content, including the will_paginate tag to a partial called _page.html.erb. Wrap the will_paginate tag with an ajax_links container. Then wrap the rest of the content using the ajax_loadzone tag. Your partial will contain:

<!-- /app/views/objects/_page.html.erb -->
<%= ajax_links :section_id => "page" do %>
  <%= will_paginate @objects %>
<% end %>
<%= ajax_loadzone do %>
  <% objects.each do |object| %>
    ...
  <% end %>
<% end %>

In your index.html.erb, instead of the content which you moved to the partial, create an ajax_section, referencing the new partial created:

<!-- /app/views/objects/index.html.erb -->
<%= ajax_section :id => "page", :render => "page" %>

This also renders the _page.html.erb partial, but the render option is not required, since _page.html.erb will be chosen based on the section id given by the :id option.

Now the ajax_links container will cause the links inside to load new content, via AJAX (instead of a normal full page request), into the ajax_section container, with an id of "page".

Finally in your controller action, add a line calling ajax_respond to your respond_to block as shown:

# /app/controllers/objects_controller.rb
Class ObjectsController < ApplicationController
  def index
    ...
    respond_to do |format|
      format.html # index.html.erb
      ajax_respond format, :section_id => "page"
    end
  end

  ...

end

The ajax_respond call prevents the full webpage being rendered when responding to an AJAX request.

And you are done. Here is an example of it in action:

AJAX Pagination applied to will_paginate