will_paginate ajax pagination

Ajax pagination

This is the most popular feature request for will_paginate library. Reasons why the core library doesn’t support this are:

1. pagination is a concept decoupled from HTTP requests and rendering;
2. Ajax pagination is done differently across web frameworks;
3. Ajax is done differently across JavaScript libraries (not everyone uses Prototype);
4. The JavaScript side of the Ajax pagination concept is not trivial at all.

So the short reason why you can’t get Ajax pagination out-of-the-box with this library is that this kind of functionality belongs to user code.

Here are some examples to get you on the right track.

Warning:
don’t use the “RemoteLinkRenderer” or similar solutions you might find on blogs using Rails’ link_to_remote helper. Such solutions are obtrusive and will usually make your app broken for web spiders and difficult to debug.

Basic unobtrusive Ajax pagination for Rails

Let’s suppose you have a search box and you want to paginate search results. The following code assumes that:

1. the partial that renders those results is named “search_results”;
2. the same partial renders all the results wrapped in a DIV with an ID “results”;
3. the “results” DIV also contains the pagination links;
4. you have a graphic progress indicator (a “spinner”) saved in “images/spinner.gif”.

# app/views/posts/_search_results.html.erb

<div id="results">
  <% for post in @posts %>
    ... render each post ...
  <% end %>
  <%= will_paginate @posts %>
</div>

First of all, make sure your controller responds to Ajax requests by updating the “results” DIV :

# app/controllers/posts_controller.rb

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

  respond_to do |format|
    format.html
    format.js {
      render :update do |page|
        # 'page.replace' will replace full "results" block...works for this example
        # 'page.replace_html' will replace "results" inner html...useful elsewhere
        page.replace 'results', :partial => 'search_results'
      end
    }
  end
end

Next, the unobtrusive JavaScript code:

# public/javascripts/application.js

document.observe("dom:loaded", function() {
  // the element in which we will observe all clicks and capture
  // ones originating from pagination links
  var container = $(document.body)

  if (container) {
    var img = new Image
    img.src = '/images/spinner.gif'

    function createSpinner() {
      return new Element('img', { src: img.src, 'class': 'spinner' })
    }

    container.observe('click', function(e) {
      var el = e.element()
      if (el.match('.pagination a')) {
        el.up('.pagination').insert(createSpinner())
        new Ajax.Request(el.href, { method: 'get' })
        e.stop()
      }
    })
  }
})