I am trying to add some style to the current page to highlight it from the other pages style. But my code does not seem to work... all the numbers look the same!
<section id="pagination">
<nav>
<ul>
<li><a class='<%= "active" if (params[:page]).to_i == @myths.current_page %>'>
<!-- checking current page and params page -->
<%= @myths.current_page.to_i %> <br> <%= (params[:page]).to_i %> <br>
<%= will_paginate @myths, :inner_window => 1, :outer_window => 1, :previous_label => '← previous', :next_label => 'next →' %>
</a></li>
</ul>
</nav>
</section>
Any help is appreciated.
update
CSS
a.active{text-decoration:underline;}
Picture of the pagination the current page is 3 (the style is applied when i check for the current page).
I am not using any helper.
Here is the generated html
<section id="pagination">
<nav>
<ul>
<li><a class='active'>
3 <br> 3 <br>
<div class="pagination">
<ul>
<li class="prev previous_page ">
<a rel="prev" href="/tags/Justice?page=2">← previous</a>
</li>
<li><a rel="start" href="/tags/Justice?page=1">1</a></li>
<li><a rel="prev" href="/tags/Justice?page=2">2</a></li>
<li class="active"><a href="/tags/Justice?page=3">3</a></li>
<li><a rel="next" href="/tags/Justice?page=4">4</a></li>
<li><a href="/tags/Justice?page=5">5</a></li>
<li class="next next_page ">
<a rel="next" href="/tags/Justice?page=4">next →</a>
</li>
</ul>
</div>
</a></li>
</nav>
</section>
this is the problem
<li class="active"><a href="/tags/Justice?page=3">3</a></li>
it should be
<li><a class="active" href="/tags/Justice?page=3">3</a></li>
for it to work. how to fix that?
since i am on page 3, 3 should be underlined the pagination should be like : <- previous 1 2 3 4 5 next ->
Consider reading the following wiki page. Just simplify your view:
<section id="pagination">
<%= will_paginate @myths, :inner_window => 1, :outer_window => 1, :previous_label =>
</section>
To add some special look and feel for the current page link, just set css style for the .current
class. will_paginate
will do the remaining staff for you and automatically add .current
class to the current page link.
Update:
To make your particular case working, just change the css style to reflect the markup
li.active a {
text-decoration:underline;
}