Kaminari pagination inside boot tabs

Question

My project uses twitter bootstrap bookmarks, and each tab has a collection of Rails Model Object. I need to use fireplaces to break down into each tab.

Since each tab will display a page for the contents of this tab from the presented model object.

Thanks.

Answer 1

I ran into the same problem yesterday, and although I would post the solution I found here. (Works in bootstrap 3x)

I also wanted to use Kaminari to split into multiple tables inside tabs in bootstrap. the problem is that every time you promote a page, it refreshes and sends you back to the first tab.

The first step necessary to solve this problem is to figure out how to direct your page to a specific tab when it loads. On some searches, I realized that I could do this by adding a hash binding to the tab to the tab url. (I can't remember where I found this.)

// Example #tab1, #tab2, #tab3 

CoffeeScript

 $ -> hash = window.location.hash hash and $("ul.nav a[href=\"" + hash + "\"]").tab("show") $(".nav-tabs a").click (e) -> $(this).tab "show" scrollmem = $("body").scrollTop() window.location.hash = @hash $("html,body").scrollTop scrollmem return return 

Javascript

 $(function(){ var hash = window.location.hash; hash && $('ul.nav a[href="' + hash + '"]').tab('show'); $('.nav-tabs a').click(function (e) { $(this).tab('show'); var scrollmem = $('body').scrollTop(); window.location.hash = this.hash; $('html,body').scrollTop(scrollmem); }); }); 

Then everything is needed to transfer the correct anchor to Kaminari.

 = paginate @foo, :param_name => "page_method", :params => { :anchor => 'tab4' } 

Greetings

Answer 2

Here is a snippet of a solution that works in a view using bootstrap 2.3. If the tab parameter is specified in the calling URL, this tab will be displayed; otherwise, the first tab is displayed.

 <ul class="nav nav-tabs" id="my_tabs"> <li><a href="#one" data-toggle="tab">Tab One</a></li> <li><a href="#two" data-toggle="tab">Tab Two</a></li> <li><a href="#three" data-toggle="tab">Tab Three</a></li> </ul> <div class="tab-content"> <div id="one" class="tab-pane"> <%= paginate @stuff, :params => {:tab => "one"}, :theme => 'twitter-bootstrap', :pagination_class => "pagination-large" %> </div> <div id="two" class="tab-pane"> <%= paginate @stuff, :params => {:tab => "two"}, :theme => 'twitter-bootstrap', :pagination_class => "pagination-large" %> </div> <div id="three" class="tab-pane"> <%= paginate @stuff, :params => {:tab => "three"}, :theme => 'twitter-bootstrap', :pagination_class => "pagination-large" %> </div> </div> <% @tab_id = params[:tab] ? "#my_tabs a[href=" + %Q(##{params[:tab]}) + "]" : "#my_tabs a:first" %> <% content_for :footer do %> <script> $(function () { $('#<%= @tab_id %>').tab('show'); }) </script> <% end %> 

Answer 3

If you use jQuery.tabs (), then this method may help you.

You must add kaminari themes for all tabs.

 $> rails g kaminari:views default $> cd app/views/kaminari $> mkdir one $> cp *_.html.* one/ 

Then you should edit the files in kaminari / first_tab. You must replace the url variable with "# {url}" # 1 everywhere in the directory.

Here it is: app / views / Kaminari / single / _first_page.html.erb

 <%= link_to 'prev', "#{url}#one", class: 'first', page: '1' %> 

then you should add a topic name:

 <script> $(document).ready(function () { $("#my_tabs").tabs(); }); </script> <ul class="nav nav-tabs" id="my_tabs"> <li><a href="#one" data-toggle="tab">Tab One</a></li> <li><a href="#two" data-toggle="tab">Tab Two</a></li> <li><a href="#three" data-toggle="tab">Tab Three</a></li> </ul> <div class="tab-content"> <div id="one" class="tab-pane"> <%= paginate @stuff, theme: 'one' %> </div> <div id="two" class="tab-pane"> <%= paginate @stuff, theme: 'two' %> </div> </div>