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的主要分页宝石，我很确定它可以做你想要的。

如果您决定在没有gem的情况下执行此操作，则可以使用后端的Rails执行此操作。

Rails方法只会在控制器中使用这样的方法检索一定数量的记录，我在this post中找到了：

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方法会导致通过网络发送较小的数据负载。

如何将分页添加到可折叠表行？

1 个答案: