0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ページネーションレイアウト

Last updated at Posted at 2022-11-09

初めに

前回はページネーションの実装について投稿しましたが今回はレイアウトについて投稿していきます。
すでに'kaminari'をGemfileに入れている方は 新たに'bootstrap4-kaminari-views'を入れてviewページの記述の所を見て貰って構いません。
まだ、'kaminari'をGemfileに入れていない場合は上から順にやって頂けたら幸いです。

Gemfile

まずGemfileに

gem 'kaminari','~> 1.2.1'
gem 'bootstrap4-kaminari-views'

上記の記述を入れてあげます。
記述をしたら忘れずに

bundle install

をしましょう。
bundle installをしたら次にkaminariの設定ファイルを作成する為に下記のコマンドをターミナルに打ち込みます。

$ rails g kaminari:config

最後に、kaminariが利用するテンプレートを作成してあげます。

$ rails g kaminari:views default

これで準備は完了です。

次にControllerに記述

例としてindexで記述しています。

app/controllers/books_controller.rb
def index
  @books = Book.page(params[:page]).per(9)
end

上記のようにpage(params[:page]).per(9)を付け足してあげます。
補足でper(9)は何を意味しているかと言うと、per(1ページで表示したい件数)と言うことになります。
自分自身で表示したい件数を決めて頂けたら結構です。

次にViewに記述

app/views/books/index.html.erb
〜省略〜
      <% if book.image.attached? %>
        <%= image_tag book.image, size:"200x120" %>
      <% end %>
             <%= book.title %>
           </div>
     <%= paginate @books, theme: 'twitter-bootstrap-4' %>
   </div>

上記のように表示させたいviewの所に<%= paginate @books, theme: 'twitter-bootstrap-4' %>を入れてあげる事により下記の写真のようにレイアウトが出来ると思います。
日本語設定については別途に投稿してあるので是非参考にしてみて下さい。

スクリーンショット 2022-11-09 22.16.58.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?