Formatting/styling will_paginate


I received few requests in the past ( personally and recently a comment on my post describing how to use will_paginate plugin ) about how to format pagination links while using will_paginate plugin.

So here it is:

When you add

<%= will_paginate @obj_instance %>

in your views to show your pagination links then it also creates an element (div) and wraps the whole thing under the class name pagination. The one with the current page will have the class name current.

Here is the html code generated by will_paginate


<div class="pagination">
<a href="/page_path?page=2">« Previous</a>
<a href="/page_path">1</a>
<a href="/page_path?page=2">2</a>
<span class="current">3</span>
<a href="/page_path?page=4">4</a>
<a href="/page_path?page=5">5</a>
<a href="/page_path?page=4">Next »</a>
</div>

Now, it is totally upto your imagination how you want to style it using CSS.

But, if due to some reason you don’t want to use the class pagination and add your own then do something like this


<%= will_paginate @obj_instance, :class => 'my_class' %>

Similarly, if you want to add an element id then

<%= will_paginate @obj_instance, :id => 'my_element' %>

Let’s say if you have done both like so:

<%= will_paginate @obj_instance, :id => 'my_element', :class => 'my_class' %>

then the new html generated by will_paginate will be

<div class="my_class" id="my_element">
<a href="/page_path?page=2">« Previous</a>
<a href="/page_path">1</a>
<a href="/page_path?page=2">2</a>
<span class="current">3</span>
<a href="/page_path?page=4">4</a>
<a href="/page_path?page=5">5</a>
<a href="/page_path?page=4">Next »</a>
</div>

Yes, it is that simple.

Advertisements

15 thoughts on “Formatting/styling will_paginate

  1. Sviergn Jiernsen says:

    (Grrrr… escaping this time so the post is readable.)

    So, in other words, you are stuck with the “<<Previous” and “Next>>” link texts for the previous and next page links. How can it be said that formatting/styling is enabled if you can’t even override those? What if I want just the little “<<” and “>>” for the previous and next page links? What if I want images for the next and previous links? What if I want text in another language? Any ideas? I could wrap the will_paginate tag manually in a DIV tag of my own creation and get the same effect as this. This doesn’t buy anything, but control over link text would.

  2. nasir says:

    No, you are not stuck with the << Next or Previous >> links. You can override these defaults like so :


    <%= will_paginate @obj_instance, :prev_label => '<<', :next_label => '>>' %>

    That’s it, just give what ever value you like to prev_label and next_label symbols.

    Similarly, if you want to add images then do this

    <%= will_paginate @obj_instance, :prev_label => image_tag('n9.gif'), :next_label => image_tag('n8.gif') %>

    As far as styling is concerned you can do a lot with CSS.

    Hope that was helpful.

  3. kienes says:

    but one question, where can i find alle the possible option for will_paginate for example to exclude the numbers for getting just the prev and next.

  4. vaibhav says:

    Hello
    I want to know how can i reduce the number of pagination link on my page ?
    Means suppose i have 20 records and want to show 2 records per page then the links of pages will be 1 to 1o like 1.2.3.4… and so on till 10 but i want to show 123. only and after 3 4.5.6 only ….
    can i do this with will_paginate ?

  5. vaibhav says:

    Thanks Nasir its working.
    Can you please explain how the :ineer_wnidow=>0 and :outer_window=>0 would work, means in which static they restrict the page links navigation ?

  6. pravs says:

    Hello,
    I am displaying 1 record each page.
    My requirement is:
    I want to have “prev” link enabled even on first page which will take me to last record.
    Similarly “next” link should be enabled on last record which will take me to first record on click.
    So basically its circular effect.
    Can anyone tell me is it possible and if yes what modifications are required if my line of code is:

    Thanks

  7. Puneet Pandey says:

    Hi Nasir,

    Went through your blog its very useful. I am facing a strange problem, Please let me know the solution of it if you know.

    I have 3 categories, from the drop down if user selects all then I have to show all the categories with the pagination. below is the sample code:

    if session[:category] == “all”
    @ins_products = Product.paginate(:all, :page => params[:page], :per_page => 5)
    @card_products = Product.paginate(:all, :page => params[:page]….)
    @loan_products = Product.paginate(:all, :page => params[:page]….)
    end

    Now what happens is, when user is watching the list of @ins_products and wish to go to other pages, the list below(i.e of @card_products and @loan_products) are also changing..

    i.e if page no. is 3 for @ins_products then it is page no. 3 for rest of the two. Whereas I want the last two should remain static.

    I hope this doesn’t looks strange
    Thanks
    Puneet

    • nasir says:

      Before offering any solution I would first like to know why are you running different queries to find card, insurance and loan products? Arent they all product objects?

      I sense something is fundamentally wrong here though I might not be correct.

      Also write your full and actual queries for each product not just Product.paginate(:all, :page => params[:page]….)

  8. Puneet Pandey says:

    Hey Nasir,

    thanks for a quick reply. I was working on that problem and got something with ajax pagination with the help of this link http://wiki.github.com/mislav/will_paginate/ajax-pagination, I am also pasting the link of my code and describing you what the final set of error results I am getting:
    This is the link for my code: http://pastie.org/605502
    The Problem I am getting is For the first set of results i.e for insurance the ajax pagination is working fine, but for the second set of results i.e for credit cards ajax pagination is not working.
    There is no change in the javascript I am using by taking the reference of the above link.
    Please let me know if you have any solution of it.

    Thanks
    Puneet Pandey

  9. Puneet Pandey says:

    Hi Nasir,

    Pagination is working fine now.. I was missing with cards partial.. I have created that and now its working fine.. thanks for your valuable support and time.. 🙂

    Cheers!!
    Puneet Pandey

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s