소개

rails 앱에서 gem "kaminari"을 사용하여 페이지 네이션 기능을 구현하려고합니다.

이번에 사용한 앱→ htps : // 기주 b. 코m/쇼타이이 66/우세 rs

가정 기능

사용자 목록 (색인)을 표시하는 페이지 구현

사용자의 표시 수는 3 명으로 설정

동기 처리, 비동기 처리 모두 구현

환경

AWScloud9

Rails 5.2.2

ruby ​​2.4.1p111 (2017-03-22 revision 58053) [x86_64-linux]

gem "kaminari"

구현 (동기 처리)

전제

사용자 목록 페이지가 있다고 가정합니다. 아래 이미지.

gem "kamianri" 설치

Gemfile

gem 'kaminari'

명령

bundle install

컨트롤러 수정

app/controllers/users_controller.rb

  def index
    @users = User.page(params[:page]).per(3).all
  end

뷰 수정

app/views/users/index.html.erb

<div id="pagenate">
  <p id="notice"><%= notice %></p>

  <h1>Users</h1>
  <h3>ユーザー数：<%= @users.size %></h3>

  <table class="table table-striped">
    <thead>
      <tr>
        <th>ID</th>
        <th>名前</th>
        <th>年齢</th>
        <th>性別</th>
        <th colspan="3"></th>
      </tr>
    </thead>

    <tbody>
      <% @users.each do |user| %>
        <tr>
          <td><%= user.id %></td>
          <td><%= user.name %></td>
          <td><%= user.age %></td>
          <td><%= user.sex %></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>
</div>
<%= link_to 'New User', new_user_path %>

동기 처리 완성

동기 처리에서의 페이지 네이션은 매우 간단하네요. 젬의 힘은 절대적입니다. 하지만 너무 의지하는 것은 금물이군요.

구현(비동기 처리)

컨트롤러 수정

app/controllers/users_controller.rb

  def index
    @users = User.page(params[:page]).per(3).all

    respond_to do |format|
      format.html
      format.js
    end

  end

컨트롤러의 index 액션으로 마지막으로 format.js 가 평가되어 js 포맷이 돌려주어진다. 그리고 index.js.erb를 찾으러갑니다

JS 뷰 작성

app/views/users/index.js.erb

  $('#pagenate').html("<%= escape_javascript(render 'index_page') %>");

index.js.erb에서 html 메소드는 <%=render 'index_page'%>를 id가 pagenate의 div 요소로 레터링합니다.

그런 다음 부분 _index_page.html.erb를 만듭니다.

부분 만들기

app/views/users/_index_page.html.erb

  <p id="notice"><%= notice %></p>

  <h1>Users</h1>
  <h3>ユーザー数：<%= @users.size %></h3>

  <table class="table table-striped">
    <thead>
      <tr>
        <th>ID</th>
        <th>名前</th>
        <th>年齢</th>
        <th>性別</th>
        <th colspan="3"></th>
      </tr>
    </thead>

    <tbody>
      <% @users.each do |user| %>
        <tr>
          <td><%= user.id %></td>
          <td><%= user.name %></td>
          <td><%= user.age %></td>
          <td><%= user.sex %></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, remote: true %>
  <br>

index.html.erb 수정

app/views/users/index.html.erb

上記省略

 </table>
##以下のerbに`remote: true`を追記
  <%= paginate @users, remote: true %>
  <br>
</div>
<%= link_to 'New User', new_user_path %>

<%= paginate @users, remote: true %> 로 하는 것으로 비동기로 처리를 한다고 하는 명령이 됩니다.

완성!

해설

respond_to do |format|~end

index 액션의 respond_to　〜ブロック〜 에서는, 지정된 포맷 형식으로 @user 의 정보를 돌려주고 있습니다. 예를 들어 다음과 같이 index 액션을 수정하면 /users.json 에 액세스하면 다음과 같은 정보를 얻을 수 있습니다.

app/controllers/users_controller.rb

  def index
    @users = User.all.page(params[:page]).per(3)

    respond_to do |format|
      format.html
      format.js
      format.json { render :json => @users }
      format.xml  { render :xml => @users }
    end
  end

- /users.xml에 액세스하면 다음과 같이 XML 형식의 @users 정보를 얻을 수 있습니다.

- 마찬가지로 html, js도 정보를 보내고 있습니다. js에 한해서는 액세스해도 오류가 발생합니다.
- 작성한 기능을 예로 들면 실제 비동기 흐름은index.html.erb→ indexアクション→ index.js.erb→ _index.page.html.erb 라는 느낌이 듭니다.

index.js.erb

app/views/users/index.js.erb

  $('#pagenate').html("<%= escape_javascript(render 'index_page') %>");

위의 js 코드는 idがpagenateの要素に、htmlメソッドを使って、　<%= render 'index_page' %>를 삽입한다는 의미입니다.

html 메소드는 임의의 요소에 지정한 html을 삽입하는 javascript의 메소드입니다.

escape_javascript는 javascript의 이스케이프 메소드입니다. js 코드 안에서는, erb 문은 직접 걸지 않기 때문에, 이런 쓰는 방법이 됩니다.

요약

조금 길어졌지만 정말 쉽게 할 수있었습니다.
더 편리한 kaminari 방법 ​​그룹은 공식적으로 → htps : // 기주 b. 코 m/카미나리/카미나리