CODEWITHSUNDEEP
twitter-bootstrapruby-on-rails-3.2will-paginate
ajbraus
ajbraus

Reputation: 2999

bootstrap nav tabs with will_paginate pagination in each tab

When I put will_paginate paginated lists into twitter bootstrap tabs. It just lists them all the way out with pagination links in between. I'm using will_paginate-bootstrap to style the pagination.

I already tried without making tabs work:

taking out the pagination styling

removing the pagination blocks

If I remove all ruby the tabs work, so they're working independently

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#A" data-toggle="tab">Newest</a></li>
    <li><a href="#B" data-toggle="tab">Activity</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="A">
      <%= render partial: "posts/post", collection: @posts, as: :post %>
      <%= will_paginate @posts, renderer: BootstrapPagination::Rails %>
    </div>
    <div class="tab-pane" id="B">
      <%= render partial: "posts/post", collection: @posts_by_activity, as: :post %>
      <%= will_paginate @posts_by_activity, renderer: BootstrapPagination::Rails %>         
    </div>
  </div>
</div>

Upvotes: 3

Views: 1703

Answers (2)

AarCee
AarCee

Reputation: 863

Tab-specific pages using the will_paginate gem are possible.

Please see http://blog.devinterface.com/2011/08/tips-multiple-pagination-with-will_paginate/

Reproducing the same stuff here (with some simplifications) in case the link becomes obsolete:

In the view:

  <%= will_paginate @products, :param_name => 'products_page' %></p>
  <%= will_paginate @services, :param_name => 'services_page' %><br />

And in the controller:

@products = current_company.products.paginate(:page => params[:products_page], :per_page => 10)<br />
@services = current_company.products.paginate(:page => params[:services_page], :per_page => 10)<br />

As seen from the code above, the key lies in sending a different parameter key value (pun intended!). In this way page information for both tabs is appended to the URL.

Upvotes: 1

butterednapkins
butterednapkins

Reputation: 120

Which version of Rails are you using? I'm using 3.2.17 and I'm having some issues of my own with Bootstrap 3 tabs and will_paginate, but not the same as you from the sound of it.

This is what I'm doing:

<ul class="nav nav-tabs">
  <li class="active"><a href="#announcements" data-toggle="tab"><i class="fa fa-exclamation-circle"></i> Announcements</a></li>
  <li><a href="#activity" data-toggle="tab"><i class="fa fa-bar-chart-o"></i> Site activity</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade in active" id="announcements">
    <%= render 'announcements' %>
  </div>

  <div class="tab-pane fade" id="activity">
    <%= render 'activity' %>
  </div>
</div>

And I have the:

<%= will_paginate @announcements, renderer: BootstrapPagination::Rails %>

bit of on each of the partials. For me, the partials are different info, so I've got instance variables in the features#index controller action for each one. Have you tried making a separate partial for each like this to see if that works?

The pagination navigation is working as expected, however, clicking on another page of content adds the ?page=# query string:

 http://localhost:3000/features?page=2

And this then applies to both tabs. So if I wanted to see page 2 of the Announcements tab, clicking over to the Site Activity tab goes right to page 2, also, since the query string doesn't ever change. Annoying.

Upvotes: 1

Related Questions