見出し画像
Photo by 4yournote913

【Rails】kaminariの導入とデザインを変える

STARS
環境
Ruby　kaminari　Rails5

ページネーションの実装


kaminariというページネーション用のgemを使って実装していきます。
簡単に実装できるので一緒にやっていきましょう！
bootstrapの導入のみでこのようなページネーションができます。

スクリーンショット 2020-10-25 13.31.22

1.kaminariのインストール

Gemfile
# 最後の行に追加
gem 'kaminari'

Gemfileにgem 'kaminari'を追加し、$ bundle installでインストールします。

gemをインストールした後は一度サーバを再起動しないとうまく読み込まれません。Ctrl-cでサーバを止め、$ rails sでサーバを起動しましょう。

これでkaminariをインストールすることができました。

2.ページネーションを表示させる

controllerで、ページネーションを表示させたいデータに.page(params[:page])を追加します。
今回は例として、投稿データ(Post.all)にページネーションをつけていきます。

app/controllers/users_controller.rb

def index
 # ページネーションをつけたいデータに.page(params[:page])を追加
 @posts = Post.all.page(params[:page])
end


次に、viewでページネーションを表示させたいところに<%= paginate @posts %>を追加します。

app/views/posts/index.html.erb

<h1>投稿一覧</h1>
<ul>
 <% @posts.each do |post| %>
   <li><%= post.content %></li>
 <% end %>
</ul>
<%= paginate @posts %>


これでページネーションが実装できました！

ページネーションが1ページに表示するレコード数はデフォルトで25件です。ページネーションを表示させるために、レコード数が26件以上になるようデータを作りましょう。

レコード数が26件以上あれば、ページネーションが表示されます。

3.ページに表示するレコード数の変更


1ページに表示するレコード数はデフォルトで25件です。このレコード数を変更したい場合は、controllerで.per(表示したいレコード数)を追加します。

例えば、.per(10)を追加すると1ページに10件のみレコードを表示します。

app/controllers/users_controller.rb

def index
 # .page(params[:page])の後に.per(10)を追加
 @posts = Post.all.page(params[:page]).per(10)
end


これで1ページに表示するレコード数を10件にすることができます。

ページネーションのデザイン変更


ページネーションが実装できたら、デザインを変更して見た目を分かりやすくしましょう。

1.bootstrapで見た目を整える

kaminariにbootstrapを適用させて、整ったページネーションにします。

まずはじめにbootstrapを読み込みます。
app/views/layouts/application.html.erbに以下のコードを追加して、アプリ全体にbootstrapを適用します。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Microposts</title>
   <%= csrf_meta_tags %>
   <!-- コード追加　Bootstrap CSS読み込みコード-->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
   <!-- コード追加　Bootstrap JavaScript読み込みコード-->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>


これでアプリにbootstrapが適用されます。

次に、kaminariにbootstrapを適用させます。
以下のコマンドを実行しましょう。

command

$ rails g kaminari:views bootstrap3


このコマンドによりapp/viewsにkaminariフォルダが自動生成され、ページネーションにbootstrapデザインが適用されます。

あとは、ビューファイルを自分好みにカスタマイズしてください。

参考

https://qiita.com/rio_threehouse/items/313824b90a31268b0074


この記事が気に入ったらサポートをしてみませんか？