如何在可折叠表格行中添加分页？

Question

我有一张表，显示用户付款的收据。 单击带有加号的行将显示所述收据的详细信息，并显示每笔付款。 该部分正在工作，但是我担心一次折叠的行可能太多。 我试图寻找有关如何向表添加分页的方法，以便仅显示5个可折叠行。 但是我遇到的大多数宝石似乎仅适用于普通表行，而不适用于可折叠行。

表格代码：

<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>

适用于其他表的分页宝石：

gem 'will_paginate-bootstrap'
gem 'jquery-datatables-rails', '~> 3.4.0'

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

Answer 1

Kaminari是Rails流行的分页工具，我很确定它可以满足您的要求。

如果您决定不使用宝石，则可以在后端使用Rails来进行。

Rails方法只能在您的控制器中使用诸如此类的方法来检索一定数量的记录，我在本文中找到了这种方法 ：

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

@page变量可以像这样在您的ERB中使用：

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

您也可以在客户端使用JavaScript来对视图进行分页，但是使用limit和offset的Rails方法将导致较小的数据有效载荷通过网络发送。