will_paginate with in twitter bootstrap tabs loads default active tab on next page

Question

So I am running rails 4 and have a page that is using twitter bootstrap tabs/nav that also have will_paginate on each tab.

Problem I have is when I change page number, it goes back to the default active tab and not the tab that I was paginating through.

Code as follows:

controller

....
def admin
   @quotes = Quote.paginate(page: params[:quotes_page], :per_page => 20).order("created_at DESC")
   @users = User.paginate(page: params[:users_page], :per_page => 20).order("created_at DESC") 
   @blogs = Blog.paginate(page: params[:blogs_page], :per_page => 20).order("created_at DESC")
end
....

view.html.erb

<div class="tabbable tabs-left">
<div class="row">
  <div class="col-md-4">
    <ul class="nav nav-pills nav-stacked">
      <li class="active"><a href="#users-tab" data-toggle="tab">Users</a></li>
      <li class=""><a href="#quote-tab" data-toggle="tab">Quotes</a></li>
      <li class=""><a href="#blog-tab" data-toggle="tab">Blogs</a></li>
    </ul>
  </div>
  <div class="col-md-8">
    <div class="tab-content">

      <div class="tab-pane fade in active" id="users-tab">
        <div class="tabbable tabs-left">
          <ul class="nav nav-tabs">
            <li class=""><a href="#user-index" data-toggle="tab">List Users</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane in active" id="user-index">
              <%= render :template => 'users/index' %>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-pane fade in" id="quote-tab">
        <div class="tabbable tabs-left">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#quote-new" data-toggle="tab">New Quote</a></li>
            <li class=""><a href="#quote-index" data-toggle="tab">List Quote</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane in active" id="quote-new">
              <%= render "quotes/fields", :quote => Quote.new %>
            </div>
            <div class="tab-pane in" id="quote-index">
              <%= render :template => 'quotes/index' %>
            </div>
          </div>
        </div>
      </div>
     .... More code of the same
     </div>
  </div>
</div>

users/index.html.erb

<div>
  <%= will_paginate @users, :param_name => 'users_page'  %>
  <% @users.each do |u| %>
  .....
  <% end %>
</div>

quotes/index.html.erb

<div>
  <%= will_paginate @quotes, :param_name => 'quotes_page'  %>
  <% @quotes.each do |u| %>
  .....
  <% end %>
</div>

So what I am trying to understand is how to make it that if I am in the quotes tab and click the paginate link to page two, that it stays in quotes tab and not reload the page back into the default active tab of users.

Something else that I have notices, if I click through all the different pagination links it just adds to the params.

ie. if I go to quotes page 2 and users page 4 the url looks like this:

http://something.com/view?quotes_page=2&users_page=4

I would of expected that it would only keep one param, for example:

http://something.com/view?users_page=4

Answer 1

You can add

<%= will_paginate @quotes, :param_name => 'quotes_page', params: {active_tab: 'quotes'}  %>

And

<div class="tab-pane fade in #{'active' if params[:active_tab] == 'quotes'}" id="quote-tab">

Same with users tab. For more details see: https://github.com/mislav/will_paginate/wiki/API-documentation