The will_paginate gem is useful in situations where you need to add paging support to a long list of results, such as an Orders list. By default, will_paginate looks a little rough without any styling love. Here are the most useful styling tricks to save you some time.
First, add the will_paginate gem in your Gemfile and run bundle install.
1
gem 'will_paginate'
For a case such as an Order model, do something like this:
1
@orders = Order.paginate(page: params[:page], per_page: 10)
Then put the following in your view:
1
<%= will_paginate @orders %>
This will do the job but looks rough without some styling, so add the following SCSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.apple_pagination {
background: #f1f1f1;
border: 1px solid #e5e5e5;
text-align: center;
padding: 1em;
cursor: default; }
.apple_pagination a, .apple_pagination span {
padding: 0.2em 0.3em; }
.apple_pagination .disabled {
color: #aaaaaa; }
.apple_pagination .current {
font-style: normal;
font-weight: bold;
background-color: #bebebe;
display: inline-block;
width: 1.4em;
height: 1.4em;
line-height: 1.5;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
text-shadow: rgba(255, 255, 255, 0.8) 1px 1px 1px; }
.apple_pagination a {
text-decoration: none;
color: black; }
.apple_pagination a:hover, .apple_pagination a:focus {
text-decoration: underline; }
Now use the following code in your views:
1
2
3
4
5
6
<div class="apple_pagination">
<div class="page_info">
<%= page_entries_info @orders %>
</div>
<%= will_paginate @orders, :container => false %>
</div>
You can use any pagination style from here.
That’s it! Happy paginating!