Adding web page pagination with Rails
03/30/2010 12:57 am By Sameera Gayan | Articles: 9
If you are in to web front-end development, you must have come across with situations where you have to display a long list of details to the web site user. As an example, displaying all the cities in Sri Lanka.
Following web page has a list which I’m describing above
Source : http://thelongestlistofthelongeststuffatthelongestdomainnameatlonglast.com/
Just look at the scroll bar at the right hand side, users has to scroll down all the way if they want to see what is at the bottom.
Is there anyway that we can simplify this problem and make it more users friendly. Yes there is, as you may all know its called pagination.
Paging will basically show you only a portion of an item list. If you want to see more, you’ll be given an option to navigate through “pages”. (page is a login collection of items)
Above screenshot has several ways of setting-up the user navigation through ‘pages’ .
Following is a good read on web page pagination.
http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
This can be done in almost all the web languages, and ruby and rails is also in the list. Not only in the list but also has one of the easiest implementation of web pagination. So you can guess what will be today’s lesson. Yes, you are right… it’s about pagination with rails. Lets start,
Problem :
I have a database which contains ‘users’ table that has a long list of user details user ids, e-mails , etc . When I list all the users it will be like this,
So you know the problem now. Let’s add pagination to this page. After doing so we should be able to see small list of users for a page and we should be able to navigate through pages.
One thing before start, for demonstrating purposes I will create a separate rails project. When you are doing this you should use the same project that you need to add pagination for. :D
Ok here we go,
Create a rails project
rails paginationTest
set the database to your required database
create a controller and an index action
create a model which inherits ActiveRecord::Base
class User < ActiveRecord::Base
end
(app/models/user.rb)
end
(app/models/user.rb)
add the following code to controller index method to show all the users
index
@users = User.all
End
(app/controllers/users_controller.rb)
Modify the view to display user list
<h1>User List</h1>
<ul>
<%for user in @users %>
<li><%= user.login%></li>
<%end%>
</ul>
(app/views/users/index.html.erb)
Ok now my set up is done, Now lets add the pagination to our page. How we implement the pagination is through a rails plug-in. Its called ‘will_paginate’
Lets install the plug-in
Inside your project directory
script/plugin install git://github.com/mislav/will_paginate.git
Now lets define the page size, here we are rails to display only 10 items per page, you can make this values static (like below) or make it dynamic. (which comes handy when you want your users to change their page sizes)
class User < ActiveRecord::Base
cattr_reader :per_page
@@per_page = 10
End
cattr_reader :per_page
@@per_page = 10
End
Now, in our controller index action, tell the controller to use pagination. So change the
@users = User.allTo
@users = User.paginate :page => params[:page]
(app/controllers/users_controller.rb)
And finally let your page knows about the pagination
Change
<h1>User List>/h1>
<h1>User List>/h1>
<ul>
<%for user in @users %>
<li><%= user.login%>/li>
<%end%>
</ul>
<h1>User List>/h1>
<ul>
<%for user in @users %>
<li><%= user.login%>/li>
<%end%>
</ul>
To
<h1>User List</h1>
<ul>
<%for user in @users %>
<li><%= user.login%></li>
<%end%>
</ul>
<%= will_paginate @users %>
(app/views/users/index.html.erb)
That’s it, Simple isn’t it. Now you should get the following page
See , now we have the pagination and only 10 records per page. Navigate through pages by clicking numbers.
This documentation is based on the following link ‘’ official wiki page for will_paginate
With some css you should be able to get an attractive pagination page with no time. Enjoy.
Post new comment