Transform infinite scroll into click to load more.

Working example

This is part will modify previous post and turn the automatic infinite scroll into an infinite scroll you have to click a button to get more results.

This will start from where the first part left off but also incorporate bootstrap.

Start by adding a button at the bottom of the index page

# views/books/index.html.erb
<div class="row">  
  <div class="col-md-2 col-md-offset-5">
  <button id="load-more" class="btn btn-primary center-block">load more</button>
  </div>
</div>  

Now, let's modify the pagination.js file to react to click listeners rather than scroll events.

// assets/javascripts/pagination.js
$(function() {
  if ($('#infinite-scrolling').size() > 0) {
      $("#load-more").click(function() {
        var more_posts_url;
        more_posts_url = $('.pagination .next_page').attr('href');
        $('.pagination').html('<p>Loading...</p>');
        $.getScript(more_posts_url);
      });
      return;
  }
});

And remove the button once we hit the end of our list by .remove() method to the #load-more button:

$('#book-list').append('<%= j render @books %>');
<% if @books.next_page %>  
  $('.pagination').replaceWith('<%= j will_paginate %>');
<% else %>  
  $(window).off('scroll');
  $('.pagination').remove();
  $('#load-more').remove();
<% end %>  

Lastly, hide the pagination controls from the view:

#infinite-scrolling {
  display: none;
}

Demo here.