Question

我的项目使用的是twitter引导标签，每个标签中都有Rails模型对象的集合。我需要在每个标签中使用kaminari分页进行收集。

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

感谢。

Answer 1

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

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

解决此问题所需的第一步是找出如何在加载时将页面定向到特定选项卡。通过一些搜索，我发现我可以通过将选项卡的哈希链接附加到选项卡的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);
});
});

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

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

干杯

Answer 2

以下是使用bootstrap 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 3

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

您应该为所有标签添加kaminari主题。

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

然后你应该编辑 kaminari / first_tab 中的文件。您应该将变量 url 替换为目录中的“＃{url}”＃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>

在bootstrap选项卡内的kaminari分页

3 个答案: