引导选项卡内的 kaminari 分页

Question

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

因为，在每个选项卡中都会有一个分页，用于显示模型对象中该选项卡的内容。

谢谢。

Answer 1

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

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

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

// Example
#tab1, #tab2, #tab3

咖啡脚本

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

然后，只需将正确的锚点传递给 Kaminari。

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

干杯

Answer 2

这是使用 bootstrap 2.3 在视图中工作的解决方案的 sn-p。如果调用 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 3

如果你使用 jQuery.tabs() 那么这种方式可以帮助你。

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

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

然后你应该编辑 kaminari/first_tab 中的文件。您应该将变量 url 替换为目录中的 "#{url}"#one。

像这样： app/views/kaminari/one/_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>