Rails 3 - "More" ajax pagination with Kaminari

Question

I am trying to do a "Twitter like" pagination with a "More" button to load results with Kaminari.

I found this question here

But I can't figure out how to make it works and if it's a good approach.

Thanks in advance

Dipetalous

Answer 1

Do you mean you need a "more" button? How about creating a helper like this?

# usage: 
#   link_to_next_page(@items)
#   link_to_next_page(@items, :remote => true)  # Ajax
def link_to_next_page(scope, name, options = {}, &block)
  param_name = options.delete(:param_name) || Kaminari.config.param_name
  link_to_unless scope.last_page?, name, {param_name => (scope.current_page + 1)}, options.merge(:rel => 'next') do
    block.call if block
  end
end

I'm ready to include this kind of helper methods to the gem if you find it useful, so please let me know what you think. Thanks!

Controller

Great, works great ! Indeed it would be useful to have that included in the gem. It would cover a very attractive and more and more common kind of pagination :) Thanks ! – Dipetalous

Hi I came across this as I'm trying to create a "more" button myself. I'm really new with jquery and can't seem to get anything going. Could you explain how this helper method could be hooked up with jquery to make the "more" button? – Unvalued

The more button is great but let the previous items remain and the next items should be below the previous items.. I would be better – Chandrachandragupta

Thank for this part of code, it helped. But I would like to ask you - I have problem, because I tried to use this helper by you, but if I will use link_to_next_page(@items, :remote => true) or link_to_next_page(@items, :remote => false), so it's the same, after click on the link I will get to URL page parameter. What I am doing bad? – Landre

is this in the gem now? I want to use it but if it exists already I won't code existing functionality – Mohamed

@AdamWaite it's in the Gem now github.com/amatsuda/kaminari#helpers it works the same way. – Ipsus

Answer 2

Keep in mind that link_to_next_page(@items, :remote => true) won't work correctly out of the box. Since it has no way to determine the current page after an Ajax request, the link needs to be replaced after new items are fetched. Using unobtrusive javascript, this would something look like this:

# app/views/items/index.js.erb
$(".items").append("<%= escape_javascript(render(@items)) %>");
$(".more_link").replaceWith("<%= escape_javascript(
    link_to_next_page @items, 'View more',
                        :remote => true,
                        :id     => :view_more) %>");

If this doesn't make sense, take a look at the Unobtrusive Javascript screencast at Railscasts.

Allomorphism