基于Hotwire实现无限滚动分页与无刷新过滤器的问题

1. 修正过滤器表单 #

修改过滤表单，指定提交请求到page_handler Turbo Frame，同时保留当前过滤词在输入框中：

<div id="<%= controller_name %>_filter" class="bg-gray-200 p-1 shadow-lg">
    <div class="p-1 lg:w-1/3">
        <%= form_with url: alerts_path, method: :get, data: { turbo_frame: "page_handler" } do %>
            <%= text_field_tag "query", params[:query], placeholder: "Filter", class: "inline-block rounded-md border border-gray-200 outline-none px-3 py-2 w-full" %>
        <% end %>
    </div>
</div>

2. 调整Turbo Stream响应逻辑 #

修改page_handler的响应模板，根据请求参数判断是分页追加还是过滤替换：

<%= turbo_frame_tag "page_handler" do %>
  <%# 分页请求：追加新数据到表格 %>
  <% if params[:page].present? && params[:page].to_i > 1 %>
    <%= turbo_stream_action_tag(
        "append",
        target: "alerts",
        template: %(#{render "alerts_table", alerts: @alerts}) 
    ) %>
  <% else %>
    <%# 过滤/首次加载：替换整个表格内容 %>
    <%= turbo_stream_action_tag(
        "replace",
        target: "alerts",
        template: %(#{render "alerts_table", alerts: @alerts}) 
    ) %>
  <% end %>

  <%# 统一替换分页器 %>
  <%= turbo_stream_action_tag(
      "replace",
      target: "#{controller_name}_pager",
      template: %(#{render "shared/index_pager", pagy: @pagy})
      ) %>
<% end %>

3. 确认分页器目标ID一致性 #

确保分页器代码中的id="<%= controller_name %>_pager"与响应模板中的target完全匹配，你的现有分页代码已满足此要求，无需额外修改。

核心逻辑说明 #

• 过滤器表单提交时，请求在page_handler Turbo Frame内处理，避免整页刷新。
• 带page参数且页码大于1的请求执行追加动作，延续无限滚动逻辑；过滤/首次加载请求执行替换动作，更新为过滤后的第一页数据。
• 分页链接已自动携带query参数，过滤状态下的无限滚动会保留当前过滤条件。

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