Rails ページネーション

# はじめに
今回はrailsでのページネーションを実装していきます。

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

#kaminariのインストール

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

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

`$ bundle install`

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

#ページネーションを表示させる
controllerで、ページネーションを表示させたいデータに`.page(params[:page])`を追加します。

```app/controllers/notes_controller.rb
def index
    @q = Note.all.ransack(params[:q])
     # ページネーションをつけたいデータに.page(params[:page])を追加
    @notes = @q.result(distinct: true).page(params[:page])
end
```

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

```app/views/notes/index.html.erb
<%= render 'shared/flash_messages' %>
<div class='container'>
   <div class='row'>
      <div class= serch.id>
        <%= search_form_for @q, class:'form-inline' ,url: notes_path do |f| %>
          <%= f.search_field :title_cont, class: 'form-control input-lg', placeholder: "IT用語やカテゴリー名を入力" ,data: {"turbolinks" => false}%>
          <%= f.submit "検索", class: "btn btn-success btn-lg" %>
        <% end %>
      </div>
      <h1>メモ一覧</h1>
      <div class='col-md-3 col-xs-12'>
        <%= render 'categories/serch', categorys: @categorys %>
      </div>
      <div class='col-md-9 col-xs-12'>
        <h2><%= @title %>一覧</h2>
      　<p>(全<%= @notes.count %>件)</p>
        <%= render 'notes/notes_index', notes: @notes %>

      </div>
      <div class='child-center'>
        <%= paginate @notes %>     #追加
      </div>
   </div>
</div>
```

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

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

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

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

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

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

```app/controllers/notes_controller.rb
def index
    @q = Note.all.ransack(params[:q])
    # .page(params[:page])の後に.per(10)を追加
    @notes = @q.result(distinct: true).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>
    <title>ItT</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <!-- bootstrap -->
     <!-- コード追加　Bootstrap CSS読み込みコード-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

  </head>
</html>
```

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

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

```
$ rails g kaminari:views bootstrap3
```

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


##2.ラベルを日本語に変更する
ラベルはi18nに対応しています。
`config/application.rb`のmoduleに`config.i18n.default_locale = :ja`を追加し、デフォルト言語を日本語に設定しましょう。

```config/application.rb
#最後
module Testapp(自分のアプリ名)
  class Application < Rails::Application
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.
    config.i18n.default_locale = :ja #追加
  end
end
```
サーバを再起動して設定を反映させます。

###ラベルの変更
`config/locales`に日本語変換用のymlファイル`ja.yml`を作成し、以下のコードを追加します。

```config/locales/ja.ym
ja:
  views:
    pagination:
      first: "&laquo; 最初"
      last: "最後 &raquo;"
      previous: "&lsaquo; 前"
      next: "次 &rsaquo;"
      truncate: "..."
```

これでページネーションのラベルを日本語に変更できました!
![スクリーンショット 2020-11-28 15.45.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/752006/23d972f3-9389-54b0-babb-e98178ce39c1.png)

#最後に
これで最低限度の実装ができました。
あとはお好みで見た目を整えてみてください。
間違っているところがあればご指摘いただければ幸いです。
最後までありがとうございました。