songtianlun
f33fb4d2ba
- Implement pagination for the cities index view. - Add shared pagination partial to reduce code duplication. - Modify arts index view to utilize the new pagination. - Update cities controller to include pagination logic. These updates improve usability by allowing better navigation through larger datasets, ensuring users can easily access and view items across multiple pages.
86 lines
4.3 KiB
Plaintext
86 lines
4.3 KiB
Plaintext
<%# app/views/shared/_pagination.html.erb %>
|
|
<% if collection.total_pages > 1 %>
|
|
<div class="flex flex-col items-center mt-16 gap-6">
|
|
<!-- 页码信息 -->
|
|
<div class="text-base-content/70 font-light">
|
|
<span class="px-4 py-2 bg-base-200/50 rounded-full">
|
|
Page <%= collection.current_page %> of <%= collection.total_pages %>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- 分页控件 -->
|
|
<div class="join shadow-lg">
|
|
<!-- 首页 -->
|
|
<%= link_to url_for(page: 1, region: params[:region], country: params[:country], sort: params[:sort]),
|
|
class: "join-item btn #{collection.first_page? ? 'btn-disabled' : 'btn-ghost'}" do %>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
|
|
</svg>
|
|
<% end %>
|
|
|
|
<!-- 上一页 -->
|
|
<%= link_to url_for(page: collection.prev_page || 1, region: params[:region], country: params[:country], sort: params[:sort]),
|
|
class: "join-item btn #{collection.first_page? ? 'btn-disabled' : 'btn-ghost'}" do %>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
<% end %>
|
|
|
|
<!-- 页码 -->
|
|
<% page_window = 2 # 当前页面前后显示的页码数 %>
|
|
<% start_page = [1, collection.current_page - page_window].max %>
|
|
<% end_page = [collection.total_pages, collection.current_page + page_window].min %>
|
|
|
|
<% if start_page > 1 %>
|
|
<%= link_to 1, url_for(page: 1, region: params[:region], country: params[:country], sort: params[:sort]),
|
|
class: "join-item btn btn-ghost hover:bg-primary/5" %>
|
|
<% if start_page > 2 %>
|
|
<button class="join-item btn btn-ghost btn-disabled">...</button>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% (start_page..end_page).each do |page| %>
|
|
<% if page == collection.current_page %>
|
|
<button class="join-item btn btn-ghost bg-primary/10 font-medium">
|
|
<%= page %>
|
|
</button>
|
|
<% else %>
|
|
<%= link_to page, url_for(page: page, region: params[:region], country: params[:country], sort: params[:sort]),
|
|
class: "join-item btn btn-ghost hover:bg-primary/5" %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% if end_page < collection.total_pages %>
|
|
<% if end_page < collection.total_pages - 1 %>
|
|
<button class="join-item btn btn-ghost btn-disabled">...</button>
|
|
<% end %>
|
|
<%= link_to collection.total_pages,
|
|
url_for(page: collection.total_pages, region: params[:region], country: params[:country], sort: params[:sort]),
|
|
class: "join-item btn btn-ghost hover:bg-primary/5" %>
|
|
<% end %>
|
|
|
|
<!-- 下一页 -->
|
|
<%= link_to url_for(page: collection.next_page || collection.total_pages, region: params[:region], country: params[:country], sort: params[:sort]),
|
|
class: "join-item btn #{collection.last_page? ? 'btn-disabled' : 'btn-ghost'}" do %>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
<% end %>
|
|
|
|
<!-- 末页 -->
|
|
<%= link_to url_for(page: collection.total_pages, region: params[:region], country: params[:country], sort: params[:sort]),
|
|
class: "join-item btn #{collection.last_page? ? 'btn-disabled' : 'btn-ghost'}" do %>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
|
|
</svg>
|
|
<% end %>
|
|
</div>
|
|
|
|
<!-- 结果统计 -->
|
|
<div class="text-sm text-base-content/60 font-light">
|
|
Showing <%= collection.offset_value + 1 %> to
|
|
<%= collection.last_page? ? collection.total_count : collection.offset_value + collection.limit_value %>
|
|
of <%= collection.total_count %> <%= collection_name || 'items' %>
|
|
</div>
|
|
</div>
|
|
<% end %> |