Javascript 如何向可折叠表行添加分页？

我有一个表格，显示用户的付款收据。单击带有加号的行可显示所述收据的详细信息，显示每个付款。这部分工作正常，但我担心可能会同时显示太多可折叠行。我试图寻找如何向表中添加分页的方法，以便只显示5个可折叠行。但我遇到的大多数gem似乎只适用于普通表行，而不适用于可折叠行

表代码：

<table id="user_report_table" class="table table-responsive table-bordered" >
  <thead style="background-color: black; color:white">
    <tr>
      <td></td>
      <th>AR Number</th>
      <th><%= sort_link "created_at", "Transaction Date" %></th>
      <th style="text-align:right">Real Property Amount</th>
      <th style="text-align:right">Tax</th>
      <th style="text-align:right">Interest</th>
      <th style="text-align:right">Penalties</th>
      <th style="text-align:right">Discount</th>
      <th style="text-align:center">Convenience Fee</th>
      <th style="text-align:center">Courier Fee</th>


      <th style="text-align:right"><%= sort_link "total", "Total" %></th>
    </tr>
  </thead>
  <tbody>
    <!-- Gets all user's payment receipts, clicking this row reveals receipt details -->
    <% @official_receipt.each do |receipt|%>
        <tr style="background-color: #66cc00" class="clickable" data-toggle="collapse" id="user_report_<%=receipt.id%>" data-target=".user_report_<%= receipt.id %>">
          <td><i class="glyphicon glyphicon-plus"></i></td>
          <td><%= receipt.or_number %></td>
          <td><%= receipt.created_at.localtime %></td>
          <td align="right"><%= number_with_precision(receipt.real_property_tax.to_f, precision: 2, delimiter: ',') %></td>
          <td align="center"><%= number_with_precision(receipt.convenience_fee.to_f, precision: 2, delimiter: ',') %></td>
          <td align="center"><%= number_with_precision(receipt.courier_fee.to_f, precision: 2, delimiter: ',') %></td>

          <td align="right"><%= number_with_precision(receipt.tax.to_f, precision: 2, delimiter: ',') %></td>
          <td align="right"><%= number_with_precision(receipt.interest.to_f, precision: 2, delimiter: ',') %></td>
          <td align="right"><%= number_with_precision(receipt.penalties.to_f, precision: 2, delimiter: ',') %></td>
          <td align="right"><%= number_with_precision(receipt.discount.to_f, precision: 2, delimiter: ',') %></td>
          <td align="right"><b><%= number_with_precision(receipt.total.to_f, precision: 2, delimiter: ',') %></b></td>
        </tr>
        <tr style="background-color: #b3ff66" id="user_report_child_row_<%=receipt.id%>" class="collapse user_report_<%=receipt.id%>" align="right">



          <td colspan="2" align="left"><strong>PIN</strong></td>
          <td align="center"><strong>Year - Quarter</strong></td>
          <td align="right"><strong>Amount</strong></td>
          <td align="right"><strong>Tax</strong></td>
          <td align="right"><strong>Interest</strong></td>
          <td align="right"><strong>Penalties</strong></td>
          <td align="right"><strong>Discount</strong></td>

          <td align="center" colspan="3"><strong>Paid in Protest?</strong></td>
        </tr>

        <!-- Reveals receipt details, this is the part I need paginated -->
        <% receipt.official_receipt_dtls.order('pin DESC, year DESC, quarter').each do |i|%>

        <tr id="user_report_child_row_<%=receipt.id%>" class="collapse user_report_<%=receipt.id%>" align="right">



          <% pin_address = Property.find_by_pin(i.pin).address %>
          <%= puts "==========================#{pin_address}" %>
          <td data-toggle="tooltip" title="<%= pin_address %>" data-container="body" colspan="2" align="left">
            <%= i.pin%>
          </td>
          <td align="center"><%= i.year%> - <%= i.quarter%></td>


          <td align="right"><%= number_with_precision(i.amount.to_f, precision: 2, delimiter: ',') %></td>
          <td align="right"><%= number_with_precision(i.tax.to_f, precision: 2, delimiter: ',') %></td>
          <td align="right"><%= number_with_precision(i.interest.to_f, precision: 2, delimiter: ',') %></td>
          <td align="right"><%= number_with_precision(i.penalties.to_f, precision: 2, delimiter: ',') %></td>
          <td align="right"><%= number_with_precision(i.discount.to_f, precision: 2, delimiter: ',') %></td>

          <td align="center" colspan="3">
            <% protest_status = PropertyDtl.find_by_pin_and_year_and_quarter(i.pin, i.year, i.quarter).paidprotest %>
            <% if protest_status == true %>
              Yes
            <% else %>
              No
            <% end %>
          </td>
        </tr>

        <% end %>

    <%end%>

  </tbody>
</table>

表格图片（浅绿色行下的所有行都是我需要拥有页面的行）

是Rails流行的分页宝石，我确信它可以满足您的要求

如果您决定在不使用gem的情况下完成这项工作，那么您可以使用后端的Rails来完成这项工作

Rails方法将仅检索一定数量的记录，使用控制器中的类似方法，我在中找到：

@page变量可以在您的ERB中使用，如下所示：

<%= link_to 'Next 10', rows_path %>

您也可以使用JavaScript在客户端对该视图进行分页，但是Rails使用

limit

和

offset

的方法会导致较小的数据有效负载通过网络发送

def index
  @rows = Row.order(created_at: :desc).limit(5).offset(@page * 5) 
end

<%= link_to 'Next 10', rows_path %>