[Rails]will_paginate를 통해 표시 개수를 선택할 수 있는 페이지 설정을 실현합니다

11538 단어 rubygemsRubyRails
Rails에 데이터 테이블을 표시할 때 줄 수(데이터 수)가 많으면 당연히 페이지가 길어지기 때문에 페이지 분할을 하는 것이 좋다.
페이지 스타일을 간단하게 구현할 수 있는 Gem "will paginate", +α드래그 버튼을 통해 표시 건수를 선택할 수도 있다.

페이지 스타일


페이지 할당.가장 익숙한 예로는 Google이 검색한 것입니다.

페이지에서 데이터 테이블을 만들 때 n줄마다 한 번씩 표시하면 디자인을 더욱 간결하게 할 수 있다.

will_paginate를 통해 구현


book_list.html.만약 eb가 이런 느낌의 표를 만들었다면.

12건이 한꺼번에 나오면 길어지기 때문에 5건이 한꺼번에 표시되는 페이지를 먼저 구현해야 한다.
※ 참고
http://blog.otsukasatoshi.com/entry/2017/07/10/120000
일단 Gemfile의 will입니다.paginal 추가
gem 'will_paginate'
gem 'bootstrap-will_paginate'
will_paginate만으로도 페이지의 스타일을 실현할 수 있지만 외관이 압도적으로 좋아졌기 때문에bootstrap-willpaginate를 추가하는 것이 좋습니다.
이어서 다음과 같이 Controller를 수정합니다
book_controller.rb
def book_list
   @books = Book.paginate(page: params[:page], per_page: 5)
end
will_paginate를 가져올 때, 각 모델에paginate 방법을 추가합니다.
표시된 데이터가 Book의 모든 데이터인 경우all.그냥 파인애플로 바꿨을 뿐이야.
참조된 페이지 번호를 가리키며 이것은 자동으로 설정된 값으로 이렇게 하면 된다.
per_1페이지에 표시되는 개수.이번에는 5건당 5건이 표시된다.
마지막으로 View에 다음 두 행을 추가합니다.
book_list.html.erb
<tbody class="text-center">
 <%= will_paginate @books, :previous_label => ' &lt 前へ', :next_label => '次へ &gt' %> # この行と
  <% @books.each do |book| %>
   <tr>
    <td><%= book.id %></td>
    <td><%= book.title %></td>
     [...省略...]
   </tr>
  <% end %>
</tbody>
<%= will_paginate @books, :previous_label => ' &lt 前へ', :next_label => '次へ &gt' %> # この行を追記
단지 이 한 걸음으로 페이지 디자인의 실현을 완성하였다.will_대단해.
View에 추가된 행은 다음과 같습니다.
<%= will_paginate @books %>
그것만으로도 충분하지만default이라면'전으로','후로'의 작법이 영어로 바뀌었기 때문에 위의 코드가 약간 바뀌었다.
실제 운행된 물건이 바로 이것이다.

View가 삽입된 위치에 버튼을 제대로 추가했습니다.bootstrap-will_paginate 덕분에 외관도 괜찮아요.

표시 개수 선택 기능


위 예에서는 5건씩 나와 있지만 표시 건수도 가지고 놀면 편하기 때문에 밑에서부터 설정할 수 있다.
will_paginate의 README를 봤는데, 그런 드롭다운 버튼이 준비돼 있지 않아 직접 만들었다.
여기서 "/book list/: 건수"를 건너뛰고params에서per로페이지를 설정합니다.
단, 페이지는paginate로 예약되어 있기 때문에 매개 변수 이름은 다른 단어를 사용합니다(여기는:per)
route.rb
get "book_list/:per" => "book#book_list_page"
get "book_list" => "book#book_list"
book_controller.rb
def book_list
   @page = 5
   @books = Book.paginate(page: params[:page], per_page: @page)
end

def book_list_page
   @page = params[:per]
   @books = Book.paginate(page: params[:page], per_page: @page)
   render("book_list")
end
book_list.html.erb
<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  <%= @page %>
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  <li><%= link_to("3", "/book_list/3") %></li>
  <li><%= link_to("5", "/book_list/5") %></li>
  <li><%= link_to("10", "/book_list/10") %></li>
  <li><%= link_to("20", "/book_list/20") %></li>
 </ul>
 <label>件ずつ表示する</label>
</div>

<thead class="text-center">
[...省略...]
<tbody class="text-center">
 <%= will_paginate @books, :previous_label => ' &lt 前へ', :next_label => '次へ &gt' %>
  <% @books.each do |book| %>
   <tr>
    <td><%= book.id %></td>
    <td><%= book.title %></td>
     [...省略...]
   </tr>
  <% end %>
</tbody>
<%= will_paginate @books, :previous_label => ' &lt 前へ', :next_label => '次へ &gt' %>
[以下略]
이 실시의 결과는 바로 이것이다.

왼쪽 위 드롭다운 메뉴에서 표시 개수를 선택할 수 있으며 표시 개수를 변경할 때마다 페이지 수가 변경됩니다.

총결산


will_paginate로 페이지의 연결 문자를 간단하게 실현할 수 있습니다.
표시 건수를 설정하는 버튼도 가능하다.

좋은 웹페이지 즐겨찾기