雷分页标签引导

Question

我的项目是使用Twitter的引导选项卡和每个选项卡中有Rails的模型对象的集合内。 我需要在每个选项卡中使用kaminari分页。

为，在每个标签都会有这个标签从提出的模型对象内容的分页。

谢谢。

Answer 1

下面是使用自举2.3的视图内工作的解决方案的一个片段。如果在调用URL中提供'tab'参数，则将显示该选项卡;否则，将显示第一个选项卡。

<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 2

如果你使用jQuery.tabs（），那么这种方式可以帮助你。

您应该添加雷主题的所有选项卡。

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

那么你应该在雷/ first_tab编辑文件。此时应更换可变网址到“＃{URL}” ＃一个无处不在目录中。

像这样： 应用程序/视图/雷/一个/ _first_page.html.erb

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

就应该添加主题名称：

<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> 

Answer 3

我碰到同样的问题跑昨天，虽然我会发布我在这里找到的解决方案。 （工程自举3次）

我也想用雷在引导选项卡中跨多个表进行分页。问题在于，每次您前进页面时，都会刷新并将您发送回第一个选项卡。

解决此问题所需的第一步是了解如何在加载时将页面指向特定的选项卡。通过一些搜索，我发现我可以通过将选项卡的散列链接附加到选项卡的URL来完成此操作。 （我不记得在那里我发现了这个。）

// 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); 
}); 
}); 

然后，所有需要的是正确的锚传递给雷。

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

干杯