Hello Guys,
There are different plugin and gem available for pagination. I would like to prefer will_paginate gem for pagination in rails.
First of all we have to add mislav-will_paginate gem via
sudo gem install mislav-will_paginate
or specify in your environment.rb
config.gem "mislav-will_paginate", :lib => "will_paginate", :source => "http://gems.github.com"
in your pagination.js add the javascript code to support ajax based pagination
document.observe("dom:loaded", function() {
var container = $(document.body)
if (container) {
# uncomment below code to load spinner
//var img = new Image
//img.src = '/images/spinner.jpeg'
function createSpinner() {
//return new Element('img', { src: img.src, 'class': 'spinner' })
}
container.observe('click', function(e) {
var el = e.element()
if (el.match('.pagination.ajax a')) {
el.up('.pagination.ajax').insert(createSpinner())
// if (el.match('.pagination a')) {
// el.up('.pagination').insert(createSpinner())
new Ajax.Request(el.href, { method: 'get' })
e.stop()
}
})
}
})
Now you have to include pagination.js in your view through
<%= javascript_include_tag 'pagination' %>
Lets we implement pagination on index method of users controller.
users_controller.rb
def index
@users = User.all.paginate(:per_page => 20,:page => params[:page])
respond_to do |format|
format.html
format.js {
render :update do |page|
page.replace_html 'user_list', :partial => 'user_list', :locals => {:users => @users}
end
}
end
end
Now move towards the views. here we have 3 views which listed below.
i) index.html.erb
<h1> Listing Users </h1>
<table>
<tr>
<th> Name </th>
<th> Surname </th>
</tr>
<tbody id='user_list'>
<%= render :partial =>'user_list', :locals => {:users => @users} %>
</tbody>
</table>
ii) _user_list.html.erb
<% users.each do |user| %>
<tr>
<td> <%= user.name %> </td>
<td> <%= user.surname %> </td>
</tr>
<% end %>
<tr>
<td colspan="2">
<%= will_paginate users, :class => 'pagination ajax', :id=>"flickr_pagination"%>
</td>
</tr>
iii) index.js.erb
$("#user_list").html("<%= escape_javascript(render :partial => "user_list") %>");
This is the file which actually play with ajax during pagination.
Now add pagination.css in style sheet for better formatting
#flickr_pagination {
text-align: center;
padding: 0.3em 0.3em 0.3em 0.3em;
clear:both;
margin:5px 0px 5px 0px;
}
#flickr_pagination * {
font: 10pt Arial,Helvetica,Geneva,sans-serif;
}
#flickr_pagination a, #flickr_pagination span {
padding: 0.2em 0.5em;
}
#flickr_pagination span.disabled {
color: #AAAAAA;
}
#flickr_pagination span.current {
font-weight: bold;
color: #898989;
}
#flickr_pagination a {
border: 1px solid #DDDDDD;
color: #0072BC;
text-decoration: none;
}
#flickr_pagination a:hover, #flickr_pagination a:focus {
border-color: #DDDDDD;
background: #898989;
color: #FFFFFF;
}
#flickr_pagination .page_info {
color: #aaaaaa;
padding: 0.8em 0em 0em 0em;
}
#flickr_pagination .prev_page, #flickr_pagination .next_page {
border-width: 1px;
}
#flickr_pagination .prev_page {
margin: 0em 1em 0em 0em;
}
#flickr_pagination .next_page {
margin: 0em 0em 0em 1em;
}
you have to include pagination.css in your view through
<%= stylesheet_link_tag 'pagination' %>
Hope this post will help you to implement ajax pagination in rails.
