How to add pagination to collapsible table rows?

Question

I have a table that shows the receipt of the user's payments. Clicking the rows with the plus symbol reveals the details of said receipt, displaying each individual payment made. That part is working, however I am worried that there may be too many collapsible rows that may be displayed at once. I've tried to look for ways on how to add pagination to the table so that only 5 of the collapsible rows will be displayed. But most of the gems I've come across seem to only apply to normal table rows and not collapsible rows.

Table code:

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

Pagination gems that worked for other tables:

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

Table picture (all rows under the light green row are the rows I need to have pages of)

Answer 1

Kaminari is the prevailing pagination gem for Rails and I am quite sure it can do what you're asking.

If you're determined to do it without a gem, you can do this with Rails on the back-end.

The Rails approach would only retrieve a certain number of records, using a method such as this in your controller, which I found in this post :

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

The @page variable could be used in your ERB like so:

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

You could also use JavaScript to paginate this view on the client side, but the Rails approach using limit and offset would lead to smaller data payloads being sent across the wire.