Gem Pagy

Thứ Tư, 21/10/2020

Tram Ho

1. Introduction:

Gem pagy được sử dụng để paging trong Ruby on Rails
Gem pagy thể hiện nhiều ưu điểm hơn so với các gem khác như will_paginate hoặc kaminari

2. Install:

Thêm gem pagyvào Gemfile
# Gemfile gem "pagy"
1
2
3
# Gemfile
gem "pagy"
Chạy command để install gem
bundle install
1
2
bundle install
Thêm pagy.rb vào file config/initializer/pagy.rb
Bạn có thể tham khảo file mẫu tại đây

Thêm include Pagy::Frontend vào application_controller.rb

<span class="token comment"># app/controllers/application_controller.rb</span>
<span class="token keyword">class</span> <span class="token class-name">ApplicationController</span> <span class="token operator">&lt;</span> <span class="token constant">ActionController</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Base</span>
  <span class="token keyword">include</span> <span class="token constant">Pagy</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Backend</span>
<span class="token keyword">end</span>

# app/controllers/application_controller.rb

class ApplicationController < ActionController::Base

include Pagy::Backend

end

Thêm include Pagy::Frontend vào application_helper.rb

<span class="token comment"># app/helpers/application_helper.rb</span>
<span class="token keyword">module</span> <span class="token constant">ApplicationHelper</span>
  <span class="token keyword">include</span> <span class="token constant">Pagy</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Frontend</span>
<span class="token keyword">end</span>

# app/helpers/application_helper.rb

module ApplicationHelper

end

3. Basic Usage:

Sử dụng pagy method trong controller

<span class="token comment"># app/controller/books_controller.rb</span>
 <span class="token variable">@pagy</span><span class="token punctuation">,</span> <span class="token variable">@books</span> <span class="token operator">=</span> pagy<span class="token punctuation">(</span><span class="token constant">Book</span><span class="token punctuation">.</span>all<span class="token punctuation">)</span>

# app/controller/books_controller.rb

@pagy, @books = pagy(Book.all)

Thêm require "pagy/extras/bootstrap" vào pagy.rb

Sử dụng pagy_bootstrap_nav helper trong view

<span class="token comment"># app/views/books/index.html.erb</span>
<span class="token operator">&lt;</span><span class="token string">%==</span> pagy_bootstrap_nav<span class="token punctuation">(</span><span class="token variable">@pagy</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">&gt;</span>

# app/views/books/index.html.erb

<%== pagy_bootstrap_nav(@pagy) %>

Kết quả thu được

4. Advance Usage:

a. Backend Extras:

Theo ví dụ trên, gem pagy đang thực hiện pagination với ActiveRecord_Relation được trả về bởi Book.all.
Tuy nhiên pagy cũng có thể thực hiện pagination với các kiểu dữ liệu khác có cấu trúc tương tự (dạng array).
Để sử dụng chức năng này cần thêm các extra của gem pagy vào file pagy.rb

Ví dụ với cấu trúc kiểu Array

 <span class="token comment"># config/initializer/pagy.rb</span>
 <span class="token keyword">require</span> <span class="token string">"pagy/extras/array"</span>

 <span class="token comment"># app/controller/books_controller.rb</span>
 <span class="token variable">@pagy</span><span class="token punctuation">,</span> <span class="token variable">@books</span> <span class="token operator">=</span> pagy_array<span class="token punctuation">(</span><span class="token constant">Book</span><span class="token punctuation">.</span>all<span class="token punctuation">)</span>
 <span class="token variable">@pagy</span><span class="token punctuation">,</span> <span class="token variable">@books</span> <span class="token operator">=</span> pagy_array<span class="token punctuation">(</span><span class="token constant">Book</span><span class="token punctuation">.</span>all<span class="token punctuation">.</span>to_a<span class="token punctuation">)</span>

# config/initializer/pagy.rb

require "pagy/extras/array"

# app/controller/books_controller.rb

@pagy, @books = pagy_array(Book.all)

@pagy, @books = pagy_array(Book.all.to_a)

Ta có thể thực hiện tương tự với Elasticsearch Rails, Searchkick
Tham khảo các backend extras khác tại đây

b. Frontend Extras:

Gem pagy cung cấp các helper method để render pagination trên Front-end

Ví dụ

<span class="token comment"># app/views/books/index.html.erb</span>
<span class="token operator">&lt;</span><span class="token string">%==</span> pagy_nav<span class="token punctuation">(</span><span class="token variable">@pagy</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">&gt;</span>

# app/views/books/index.html.erb

<%== pagy_nav(@pagy) %>

Gem pagy cung cấp các front extra và các helper method tương ứng tùy theo thư viện để render pagination trên Front-end

Ví dụ sử dụng bootstrap

 <span class="token comment"># config/initializer/pagy.rb</span>
 <span class="token keyword">require</span> <span class="token string">"pagy/extras/bootstrap"</span>

 <span class="token comment"># app/views/books/index.html.erb</span>
 <span class="token operator">&lt;</span><span class="token string">%==</span> pagy_bootstrap_nav<span class="token punctuation">(</span><span class="token variable">@pagy</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">&gt;</span>

# config/initializer/pagy.rb

require "pagy/extras/bootstrap"

# app/views/books/index.html.erb

Bạn có thể tham khảo template gốc của gen pagy và custom lại theo nhu cầu
Tham khảo template gốc của pagy cho bootstrap tại đây

Ví dụ

<span class="token comment"># app/views/books/index.html.erb</span>
 <span class="token operator">&lt;</span><span class="token string">%==</span> render partial<span class="token punctuation">:</span> <span class="token string">'pagy/bootstrap_nav'</span><span class="token punctuation">,</span> locals<span class="token punctuation">:</span> <span class="token punctuation">{</span>pagy<span class="token punctuation">:</span> <span class="token variable">@pagy</span><span class="token punctuation">}</span> <span class="token operator">%</span><span class="token operator">&gt;</span>

# app/views/books/index.html.erb

<%== render partial: 'pagy/bootstrap_nav', locals: {pagy: @pagy} %>

Một số method của Pagy Object được sử dụng trong template

count<span class="token punctuation">:</span> tổng số record
page<span class="token punctuation">:</span> page hiện tại 
items<span class="token punctuation">:</span> số lượng record của mỗi page
pages<span class="token punctuation">:</span> tổng số page
last<span class="token punctuation">:</span> page cuối cùng
offset<span class="token punctuation">:</span>
from<span class="token punctuation">:</span> index của record đầu tiên trong page <span class="token punctuation">(</span>tính từ <span class="token number">1</span><span class="token punctuation">)</span>
to<span class="token punctuation">:</span> index của record cuối cùng trong page <span class="token punctuation">(</span>thường trùng với page<span class="token punctuation">.</span>items<span class="token punctuation">)</span>
prev<span class="token punctuation">:</span> page trước
<span class="token keyword">next</span><span class="token punctuation">:</span> page sau

count: tổng số record

page: page hiện tại

items: số lượng record của mỗi page

pages: tổng số page

last: page cuối cùng

offset:

from: index của record đầu tiên trong page (tính từ 1)

to: index của record cuối cùng trong page (thường trùng với page.items)

prev: page trước

next: page sau

Tham khảo các front extras khác tại đây

c. Feature Extras:

i. I18n:

Tham khảo các file i18n có sẵn tại đây
Pagy cung cấp method pagy_t tương tự như method I18n.t

Method pagy_t nhanh hơn so với method I18n.t

<span class="token comment"># config/initializer/pagy.rb</span>
<span class="token keyword">require</span> <span class="token string">"pagy/extras/i18n"</span>

<span class="token comment"># app/views/books/index.html.erb</span>
<span class="token operator">&lt;</span><span class="token operator">%</span><span class="token operator">=</span> pagy_t<span class="token punctuation">(</span><span class="token string">"pagy.nav.prev"</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">&gt;</span>

# config/initializer/pagy.rb

require "pagy/extras/i18n"

# app/views/books/index.html.erb

<%= pagy_t("pagy.nav.prev") %>

Tham khảo thêm tại đây

ii. items:

Sử dụng method pagy với option items để quy định số record trả về mỗi page

Ví dụ

<span class="token comment"># config/initializer/pagy.rb</span>
<span class="token keyword">require</span> <span class="token string">"pagy/extras/items"</span>

<span class="token comment"># app/controller/books_controller.rb</span>
<span class="token variable">@pagy</span><span class="token punctuation">,</span> <span class="token variable">@books</span> <span class="token operator">=</span> pagy<span class="token punctuation">(</span><span class="token constant">Book</span><span class="token punctuation">.</span>all<span class="token punctuation">,</span> items<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">)</span>

# config/initializer/pagy.rb

require "pagy/extras/items"

# app/controller/books_controller.rb

Bạn có thể quy định số items mặc định trong pagy.rb

<span class="token comment"># config/initializer/pagy.rb</span>

<span class="token constant">Pagy</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">VARS</span><span class="token punctuation">[</span><span class="token symbol">:items</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">20</span>

# config/initializer/pagy.rb

Pagy::VARS[:items] = 20

iii. overflow:

Sử dụng method pagy với option overflow để quy định số behaviour trả về khi truy cập quá số page cho phép

Ví dụ

<span class="token comment"># config/initializer/pagy.rb</span>
<span class="token keyword">require</span> <span class="token string">"pagy/extras/overflow"</span>

<span class="token comment"># app/controller/books_controller.rb</span>
<span class="token variable">@pagy</span><span class="token punctuation">,</span> <span class="token variable">@books</span> <span class="token operator">=</span> pagy<span class="token punctuation">(</span><span class="token constant">Book</span><span class="token punctuation">.</span>all<span class="token punctuation">,</span> overflow<span class="token punctuation">:</span> exception<span class="token punctuation">)</span>

# config/initializer/pagy.rb

require "pagy/extras/overflow"

# app/controller/books_controller.rb

Bạn có thể quy định số items mặc định trong pagy.rb

<span class="token comment"># config/initializer/pagy.rb</span>

<span class="token constant">Pagy</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">VARS</span><span class="token punctuation">[</span><span class="token symbol">:overflow</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token symbol">:exception</span>

# config/initializer/pagy.rb

Pagy::VARS[:overflow] = :exception

Các options có thể là

empty_page<span class="token punctuation">:</span> trả về mảng rỗng cho paging
last_page<span class="token punctuation">:</span> trả về record của page cuối cùng cho paging
exception<span class="token punctuation">:</span> <span class="token keyword">raise</span> <span class="token constant">Pagy</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">OverflowError</span>

empty_page: trả về mảng rỗng cho paging

last_page: trả về record của page cuối cùng cho paging

exception: raise Pagy::OverflowError

Tham khảo các feature extra khác tại đây

5. Link demo

Github: https://github.com/thanhlt-1007/demo_pagy

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Gem Pagy

1. Introduction:

2. Install:

3. Basic Usage:

4. Advance Usage:

a. Backend Extras:

b. Frontend Extras:

c. Feature Extras:

i. I18n:

ii. items:

iii. overflow:

5. Link demo

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript