ruby-on-rails-3 - ブートストラップタブ内のカミナリページネーション

Question

私のプロジェクトは Twitter のブートストラップ タブを使用しており、各タブには Rails モデル オブジェクトのコレクションがあります。各タブのコレクションにカミナリのページネーションを使用する必要があります。

すべてのタブには、表示されたモデル オブジェクトからのこのタブのコンテンツのページ付けがあります。

ありがとう。

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

あとは、正しいアンカーをカミナリに渡すだけです。

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

乾杯

Answer 2

これは、ブートストラップ 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() を使用する場合、この方法が役立ちます。

すべてのタブにカミナリ テーマを追加する必要があります。

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