手取り足取りプログラミング

cloud9、railsについて自分がつまずいた所を詳しく説明します。なぜなら一番読み返すのは自分だから。

【Rails】ページングを実装する「kaminari」

準備

ページングを実装する前にたくさんのデータと表示するページを作成します。

下記コマンドを実行してデータを表示するページを作成します。

rails g scaffold user name
rake db:migrate

1000件のデータを作成します。

db/seeds.rb

1000.times do |i|
  User.create!(
    name:    "名前#{i}",
  )
end

下記コマンドを実行してデータを投入します。

rake db:seed

実装

kaminariのインストール

kaminariをGemfileに追加します。

Gemfile
gem 'kaminari'

kaminariをインストールします。

bundle install

コントローラーの修正

users_controller.rb の index 部分を下記のように変更します。

app/controllers/users_controller.rb
  def index
    @users = User.page(params[:page])
  end

ビューの修正

erbの場合

3、23行目を追加します。

app/views/index.html.erb
<p id="notice"><%= notice %></p>
<h1>Listing Users</h1>
<%= page_entries_info @users %>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th colspan="3"></th>
    </tr>
  </thead>
  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>
<%= paginate @users %>
<br>
<%= link_to 'New User', new_user_path %>
slimの場合

2、17行目を追加します。

app/views/index.html.slim
h1 Listing users
= page_entries_info @users
table
  thead
    tr
      th Name
      th
      th
      th
  tbody
    - @users.each do |user|
      tr
        td = user.name
        td = link_to 'Show', user
        td = link_to 'Edit', edit_user_path(user)
        td = link_to 'Destroy', user, data: { confirm: 'Are you sure?' }, method: :delete
= paginate @users
br
= link_to 'New User', new_user_path

ついでにroutesを直しておく

config/routes.rb
root 'users#index'

デザイン

下記コマンドを実行します。

rails g kaminari:views bootstrap4

デザイン適応前

f:id:yonayonaru:20161029180758p:plain

デザイン適応後

f:id:yonayonaru:20161029181222p:plain

ソース公開

cloud9のソースを公開します。