Kaminari ajax pagination only with prev and next button

Question

I want to use Kaminari only with prev and next button.

I'm using the next helper:

<%= link_to_next_page @object, 'Next', :remote=>true %>

but this, show only a link with Next page.

I want to know how can I use the helpers link_to_previous_page and link_to_next_page toguether.

Answer 1

Actually "link_to_next_page" helper only creates a link to the next page as the name of the method says. If you want to use prev and next buttons you should use the "paginate" helper. Ex:

You should check the Kaminari Github Repository README doc for more examples

Answer 2

1. Generate the Kaminari views you'll need to edit. e.g. for bootstrap:

   rails g kaminari:views bootstrap

2. Rename app/views/kaminari/paginator.html.erb to _default_paginator.html.erb (note the added "_" at the beginning).

3. Create the following file: app/views/kaminari/_next_prev_paginator.html.erb. Copy/paste the contents of _default_paginator.html.erb in there, then delete the lines that display the page links.

4. Generate an initializer:

   rails g kaminari:config

5. In config/initializers/kaminari_config.rb, add the following code before "Kaminari.configure do":

   Kaminari::Helpers::Tag.class_eval do def to_s(locals = {}) @template.render :partial => "../views/kaminari/#{@theme}#{self.class.name.demodulize.underscore}", :locals => @options.merge(locals) end end

6. In your view:

   paginate @objects, :theme => "default_"

   or

   paginate @objects, :theme => "next_prev_"

You can now style _default_paginator.html.erb and _next_prev_paginator.html.erb separately as you see fit.

Answer 3

Maybe not exactly what you are after but you can hide elements using CSS.
I use bootstrap with Kaminari and adding these to my app/assets/stylesheets/application.css.scss will only show the previous and next buttons.

/* Removes the ellipses */
li.page.gap.disabled a {
  display:none;
}
/* Removes the last button */    
li.last.next a {
  display:none;
}
/* Removes first button */
li.first a {
  display:none;
}
/* Removes the active page */
li.page.active a {
  display:none;
}

It will apply this across the whole site though.