Ruby on rails 3 引导选项卡内的kaminari分页

我的项目使用twitter引导选项卡，每个选项卡中都有Rails模型对象的集合。 我需要对每个选项卡中的集合使用kaminari分页

如前所述，在每个选项卡中，都会根据显示的模型对象对此选项卡的内容进行分页

---

谢谢。

这里是一个使用bootstrap 2.3在视图中工作的解决方案片段。如果调用URL中提供了“

选项卡”

”参数，则将显示该选项卡；否则，将显示第一个选项卡

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

{:tab=>“one”}，:theme=>“twitter引导程序”，:pagination_class=>“pagination large”%>
{:tab=>two}，:theme=>twitter引导，:pagination_class=>“pagination large”%>
{:tab=>“三”}，:theme=>“twitter引导程序”，:pagination_class=>“pagination large”%>
$（函数（）{
$（'#'）.tab（'show'）；
})

如果您使用jQuery.tabs（），那么这种方法可以帮助您

您应该为所有选项卡添加kaminari主题

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

然后您应该在kaminari/first_选项卡中编辑文件。您应该将变量url替换为“#{url}”#目录中的任意位置

像这样： app/views/kaminari/one/_first_page.html.erb

然后您应该添加主题名称：

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

$（文档）.ready（函数（）{
$（“#我的标签”）.tabs（）；
});

我昨天遇到了同样的问题，尽管我会在这里发布我找到的解决方案。（在引导3x中工作）

我也想使用Kaminari在bootstrap中的选项卡中跨多个表分页。问题是，每次您推进页面时，它都会刷新并将您发送回第一个选项卡

解决此问题所需的第一步是了解如何在加载页面时将其定向到特定选项卡。通过一些搜索，我发现我可以通过将链接到选项卡的哈希附加到选项卡的url来实现这一点。（我不记得在哪里找到的。）

咖啡脚本

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

$(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);
});
});

Javascript

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

$(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' }

---

干杯

问题是什么如果kaminari分页结果不好，请检查@user2628176解决问题的方法，为什么它最终会变成这个烂页面