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

Question

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

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

谢谢。

Answer 1

我昨天遇到了同样的问题，尽管我会在这里发布我找到的解决方案。（在引导程序中工作 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 在视图中工作的解决方案片段。如果tab调用 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 %>

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>