質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

0回答

981閲覧

Rails : Kaminariでの複数ページネーション

anpnt

総合スコア29

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2018/11/06 10:23

Railsで同一ページでの複数ページネーションの実装をしたいのですが、

https://qiita.com/YutoYasunaga/items/370e4749281abd0bca4a

この記事の方法で、うまく行ったことはいったのですが、ページネーションを付けたいリストをタブで分けようとしたら、タブとページネーションが連動してしまってうまくいきません。

タブは以下の方法で実装しています。

%div{class: "tabs"} %input{id: "working_hours", type: "radio" ,name: "tab_item", checked: "checked"} %label{class: "tab_item", for: "working_hours"} 作業時間 %input{id: "login_logs", type: "radio" ,name: "tab_item"} %label{class: "tab_item", for: "login_logs"} ログ %div{class: "tab_content", id: "working_hours_content"} %div{class: "tab_content_description"} %table{style:"border-collapse:collapse;"} %thead %tr %th ID %th 名前 %th 作業開始時間 %tbody - @working_hours.each do |working_hour| %tr %td= working_hour.user_id %td= "#{working_hour.user.realname}" %td= "#{working_hour.start_datetime.to_s(:admin_view)}" = paginate(@working_hours, param_name: 'working_hours_page') %div{class: "tab_content", id: "login_logs_content"} %div{class: "tab_content_description"} %table{style:"border-collapse:collapse;"} %thead %tr %th ID %th 名前 %th IPアドレス %tbody - @login_logs.each do |login_log| %tr %td= login_log.user_id %td= login_log.user.realname %td= login_log.login_from_ip_address = paginate(@login_logs, param_name:'login_logs_page')
/*タブ切り替え全体のスタイル*/ .tabs { margin-top: 50px; padding-bottom: 40px; background-color: #fff; width: 720px; } /*1つ1つのタブのスタイル*/ .tab_item { width: calc(100%/2); /*ここの分母をタブの数に合わせる*/ height: 40px; border-bottom: 3px solid #f1c11b; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: #d9d9d9; line-height: 40px; font-size: 16px; text-align: center; color: #565656; display: block; float: left; text-align: center; font-weight: bold; transition: all 0.2s ease; } .tab_item:hover { opacity: 0.75; } /*ラジオボタンを全て消す*/ input[name="tab_item"] { display: none; } /*タブ切り替えの中身のスタイル*/ .tab_content { display: none; padding: 20px; clear: both; overflow: scroll; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); height: 400px; } .tab_content_description { padding: 20px 0px 10px 0px; } /*選択されているタブのコンテンツのみを表示*/ #working_hours:checked ~ #working_hours_content, #login_logs:checked ~ #login_logs_content, { display: block; } /*選択されているタブのスタイルを変える*/ .tabs input:checked + .tab_item { background-color: #f1c11b; color: #fff; }

jQueryとか使ってタブの実装をしたほうが早いでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問