kaminari pagination inside bootstrap tabs - ruby-on-rails-3

Question

My project is using twitter bootstrap tabs and in each tab there is collection of Rails Model Object.
i need to use kaminari pagination for the collection in each tab.
As, in every tab there will be a pagination for the content of this tab from the model object presented.
Thanks.

Answer 1

I ran across this same problem yesterday and though I would post the solution I found here. (Works in bootstrap 3x)
I too wanted to use Kaminari to paginate across multiple tables within tabs in bootstrap. the problem is, every time you advance the page, it refreshes and sends you back to the first tab.
The first step required for solving this problem is find out how to direct your page to a specific tab when it loads. With some searching, I figured out that I could do this by appending the hash linking to tab to the url of the tab. (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, all need is to pass the correct anchor to Kaminari.
= paginate #foo, :param_name => "page_method", :params => { :anchor => 'tab4' }
Cheers

Answer 2

Here is a snippet of a solution that works within a view using bootstrap 2.3. If a 'tab' param is provided in the calling URL, that tab will be displayed; otherwise, the first tab will be displayed.
<ul class="nav nav-tabs" id="my_tabs">
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</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 way can help you.
You should add kaminari themes for all tabs.
$> rails g kaminari:views default
$> cd app/views/kaminari
$> mkdir one
$> cp *_.html.* one/
Then you should edit files in kaminari/first_tab. You should replace variable url to "#{url}"#one everywhere in directory.
Like this:
app/views/kaminari/one/_first_page.html.erb
<%= link_to 'prev', "#{url}#one", class: 'first', page: '1' %>
then you should add theme name:
<script>
$(document).ready(function () {
$("#my_tabs").tabs();
});
</script>
<ul class="nav nav-tabs" id="my_tabs">
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</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>