如何为展示用户支付收据的可折叠表格行添加分页功能？

嘿，我懂你这个痛点——带折叠子行的表格分页确实比普通表格棘手，那些常规分页Gem大多只盯着行的数量计数，很容易把父行和它的子行拆到不同页面，或者误把子行也算进分页配额里，直接打乱你的折叠逻辑。下面给你两个实用的解决方案，亲测好用：

核心思路是：分页只针对带加号的父行（收据主记录），子行（单条支付记录）完全跟着父行走，不算入分页数量。

• 第一步：后端处理父行分页
  用你熟悉的分页Gem（比如will_paginate或kaminari），只对父级收据数据做分页，同时预加载子支付记录避免N+1查询：

  # 用will_paginate的写法，每页5条父行
  @receipts = Receipt.order(created_at: :desc).includes(:payments).paginate(page: params[:page], per_page: 5)
  
  # 用kaminari的写法
  @receipts = Receipt.order(created_at: :desc).includes(:payments).page(params[:page]).per(5)
  

• 第二步：前端渲染时绑定父子行
  在模板里把父行和对应的子行放在一起渲染，确保分页切换时，父子行始终在同一页面：

  <table class="receipt-table">
    <thead>
      <tr>
        <th>收据编号</th>
        <th>总金额</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <% @receipts.each do |receipt| %>
        <!-- 可折叠父行 -->
        <tr class="parent-row" data-id="<%= receipt.id %>">
          <td><button class="expand-btn">+</button> <%= receipt.number %></td>
          <td><%= number_to_currency(receipt.total) %></td>
          <td>查看</td>
        </tr>
        <!-- 子行（默认隐藏） -->
        <tr class="child-row" data-id="<%= receipt.id %>" style="display: none;">
          <td colspan="3">
            <table class="sub-table">
              <thead>
                <tr>
                  <th>支付时间</th>
                  <th>金额</th>
                  <th>支付方式</th>
                </tr>
              </thead>
              <tbody>
                <% receipt.payments.each do |payment| %>
                  <tr>
                    <td><%= payment.created_at.strftime('%Y-%m-%d %H:%M') %></td>
                    <td><%= number_to_currency(payment.amount) %></td>
                    <td><%= payment.method %></td>
                  </tr>
                <% end %>
              </tbody>
            </table>
          </td>
        </tr>
      <% end %>
    </tbody>
  </table>
  
  <!-- 分页导航 -->
  <%# will_paginate的导航 %>
  <div class="pagination">
    <%= will_paginate @receipts %>
  </div>
  
  <%# kaminari的导航 %>
  <div class="pagination">
    <%= paginate @receipts %>
  </div>
  

• 第三步：保留折叠逻辑
  你的原有JS折叠逻辑不用大改，只要确保点击父行时只匹配对应ID的子行：

  document.querySelectorAll('.expand-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      const receiptId = this.closest('.parent-row').dataset.id;
      const childRow = document.querySelector(`.child-row[data-id="${receiptId}"]`);
      
      childRow.style.display = childRow.style.display === 'none' ? 'table-row' : 'none';
      this.textContent = this.textContent === '+' ? '-' : '+';
    });
  });
  

如果不想手动折腾，可以试试DataTables这类前端表格库，它原生支持嵌套行和分页配置，能自动忽略子行的分页计数：

1. 初始化表格时，把父行标记为“主行”，子行作为细节行
2. 配置分页参数pageLength: 5，确保每页只显示5条父行
3. 绑定折叠按钮的事件，触发DataTables的细节行展开/收起

这个方案适合复杂表格，但需要额外引入前端库，看你的项目需求选择。

• 绝对不要让分页逻辑把子行算入分页数量，必须确保分页只针对顶级父行
• 一定要用includes预加载子支付记录，避免频繁查询数据库拖慢页面
• 测试分页切换时，检查父行和子行是否始终在同一页面，避免拆分

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