Will_Pagenateで記事の表示件数を設定する。

実現するのもの

記事のテストページです。
動画のように、2件ごとに記事を表示させています。
記事の投稿機能が実装できていればこちらの導入はめちゃくちゃ簡単にできます。

必要なgemのインストール

今回はwill_pagenateというgemを使います。表示件数の制御簡単に行えるgemです。

gem 'will_paginate',           '3.1.6'

見た目を整えるgemもあるのですが、デザインはこだわりがあったので自力でCSSを書くことにしました。

bundle install

Controllerの修正

gemをインストールするとpagenateメソッドが扱えるようになり、取得したデータを何件ごとに表示させるかを設定できます。

class ArticlesController < ApplicationController
articles_controller.rb

  def index
      @articles= Article.all.paginate(page: params[:page], per_page: 2)
  end
end

per_page:のところで、表示件数を設定。今回は2件ごとなので、per_page: 2になっています。
page: params[:page]のところはあとでさっと解説します。

記事のテンプレートを編集

<div class="articles">
・
・
 (記事本体のテンプレート)
・
・
</div>
<%= will_paginate @articles, previous_label: '<', next_label: '>' %>

テンプレートでは、上記のように記事本体のテンプレートの下などに、

<%= will_paginate @articles %>

を追記。

previous_labelオプションは、動画で見たようにページを選択するボタンにある「 <」や「>」などのボタンの内容を変更することができます。デフォルトでは「prev」「next」なので、それらを「<」に「>」変えています。

デザインを変えて仕上げ

//Pagenation

.pagination{
    list-style: none;
    display: flex;
    text-align: center;
    margin-bottom: 40px;
}

.pagination a{
    color: white;
    padding: 15px 25px;
    text-decoration: none;
}

.pagination li{
    background-color: #a1887f;
    padding: 12px 0px;
}

.pagination li.active{
    font-style: normal;
    color: white;
    background: #3e2723;
    font-family: sans-serif;
}

.pagination li:hover{
    cursor: pointer;
}

li.previous_page.disabled,
li.next_page.disabled {
    display: none;

}

li.previous_page,
li.next_page{
    background-color: #33691e;
}

li.previous_page a,
li.next_page a{
    color: white;
}

完成です！

それでpage: params[:page]って何？

これは、下記の作成したボタンがあります。 f:id:Ryo10Leo:20200108135612p:plain
例えば、このボタンの中で１が押されるとアドレスバーには、こんな感じで表示されています。
f:id:Ryo10Leo:20200108135714p:plain
注目して欲しいのは「?page=1」となっているところです。
押したボタンと同じ数字です。同様に２のボタン、３のボタンを押すことで、「?page=2」「?page=3」と記事の...articles/indexのURLに情報が追加されていると思ってください。