ROR中data-filter结合will_paginate分页第二页过滤失效求助

你遇到的问题核心是前端过滤仅作用于当前页数据，且分页时未将过滤参数传递给后端，导致切换到第二页及以后时，后端返回未过滤的全量数据分页结果，前端无法正确过滤。

解决方案分三步： #

1. 修改控制器，支持后端过滤+分页 #

在控制器中接收过滤参数，先过滤数据再分页，同时获取所有唯一产品名称用于生成过滤选项（避免仅展示当前页的产品名）：

def index
  # 获取过滤参数，默认显示全部
  @filter = params[:filter] || 'all-items'
  
  # 构建过滤后的查询集
  galleries_query = if @filter == 'all-items'
                      Gallery.all
                    else
                      Gallery.where(product_name: @filter)
                    end
  
  # 对过滤后的结果分页
  @galleries = galleries_query.paginate(page: params[:page], per_page: 19)
  
  # 获取所有非空的唯一产品名称（用于生成过滤选项）
  @unique_product_names = Gallery.where.not(product_name: [nil, ""]).pluck(:product_name).uniq
end

private
def gallery_attributes
  params.require(:gallery).permit([:product_name,:image1,:image2,:image3,:image4,:image5,:title1,:title2,:title3,:title4,:title5,:video,:videotitle])
end

2. 更新视图，生成正确的过滤选项和分页链接 #

• 过滤选项基于全量数据的唯一产品名，而非当前页数据
• 分页链接带上过滤参数，保证分页时过滤条件持续生效
• 点击过滤选项时触发后端请求，而非仅前端隐藏元素

<!-- 过滤选项 -->
<span class="list <%= 'active' if @filter == 'all-items' %>" data-filter="all-items">All</span>
<% @unique_product_names.each do |g| %>
  <span class="list <%= 'active' if @filter == g %>" data-filter="<%= g %>"><%= g %></span>
<% end %>

<!-- 内容列表 -->
<% count = 1 %>
<% @galleries.each do |g| %>
  <% if g.image1.present? %>
    <div class="item <%= g.product_name %>">
      <%= g.product_name %>
      <%= image_tag g.image1.url, style: "width:100%", onclick: "openModal();currentSlide(#{count})", class: "hover-shadow cursor", alt: g.title1, title: g.title1 %>
      <p class="desc" onclick= "openModal();currentSlide(<%= count %>)" ><%= g.title1 %></p>
    </div>
    <% count += 1 %>
  <% end %>
<% end %>

<!-- 分页链接（带上过滤参数） -->
<%= will_paginate @galleries, params: { filter: @filter } %>

<!-- 过滤点击事件：跳转后端获取过滤后的数据 -->
<script>
document.querySelectorAll('.list').forEach(btn => {
  btn.addEventListener('click', function() {
    const filterValue = this.dataset.filter;
    // 跳转到过滤后的第一页
    window.location.href = '<%= galleries_path %>?filter=' + encodeURIComponent(filterValue) + '&page=1';
  });
});
</script>

3. 原代码失效原因 #

• 过滤选项仅从当前页的@galleries中提取产品名，分页后可能缺失其他产品的过滤选项
• 分页时未传递过滤参数，后端返回全量数据的分页结果，而非过滤后的结果
• 前端仅靠DOM隐藏实现过滤，无法作用于新加载的分页页面

内容的提问来源于stack exchange，提问作者nourza