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)
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.
Related
I have the following table in HTML and I want to remove all whitespaces from variable item.book.How can I do it?
<table>
<theader>
<tr>
<th>Livro</th>
<th>Autor da Review</th>
<th>Review</th>
<th>Link</th>
</tr>
</theader>
<tbody>
<% list.forEach((item,index)=>{ %>
<tr>
<td><%= item.book %></td>
<td><%= item.name %></td>
<td> <%= item.desc %></td>
<td id="link"> <a href=/review/<%= item.email %>/ <%= item.book %>> /review/<%= item.email %>/<%= item.book %> </a></td>
</tr>
<% })%>
</tbody>
</table>
I am getting the error: missing ) after argument list while compiling ejs.
I tried many times, but I can't find the problem.
Here's the ejs that causes errors.
What is the problem with this code?
<%- include('../_layouts/adminheader') %>
<h2 class='page-title'>Products</h2>
<br>
Add a new product
<br><br>
<% if (count > 0) { %>
<table class="table table-striped">
<thead>
<tr class="home">
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Product Image</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<% products.forEach(function(product) { %>
<tr>
<td><%= product.title %></td>
<td>$<%= parseFloat(product.price).toFixed(2) %></td>
<td><%= product.category %></td>
<td>
<% if (product.image == "") { %>
<img src="/images/noimage.png">
<% } else { %>
<img src="product_images/<%= product._id %>/<%= product.image %>">
<% }%>
</td>
<td>Edit</td>
<td>Delete</td>
<% } %>
</tr>
<% }); %>
</tbody>>
</table>>
<% } else { %>
<h3 class="text-center">There are no products.</h3>>
<% } %>
<%- include('../_layouts/adminfooter') %>
Before your closing </tr>, the line
<% } %>
is superfluous. The parser therefore interprets this as ending the callback function of forEach() without providing further arguments or closing the
round bracket of the function call. (The error message is actually pretty clear about what's going on, if you think about it. :))
By the way you also got two superflous > behind your closing </tbody> and </table>.
Here's a working fixed code example you can put into https://ionicabizau.github.io/ejs-playground/
<%
var products = [
{title: "foobar", category: "things", image: "", _id: 1, price: 0}
];
var count = products.length;
%>
<h2 class='page-title'>Products</h2>
<br>
Add a new product
<br><br>
<% if (products.length > 0) { %>
<table class="table table-striped">
<thead>
<tr class="home">
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Product Image</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<% products.forEach(function(product) { %>
<tr>
<td><%= product.title %></td>
<td>$<%= parseFloat(product.price).toFixed(2) %></td>
<td><%= product.category %></td>
<td>
<% if (product.image == "") { %>
<img src="/images/noimage.png">
<% } else { %>
<img src="product_images/<%= product._id %>/<%= product.image %>">
<% }%>
</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<% }); %>
</tbody>
</table>
<% } else { %>
<h3 class="text-center">There are no products.</h3>>
<% } %>
I have got following error "unexpected token <" while I have run following code in my app build in backbone.js using underscore template.
Here is code:
var data = [{'date':'03 Mar', 'users':5, 'not_ended_sessions':25}]
var rowtemplate = _.template(this.template, {'data': data });
$(this.el).html(html);
and here is my html template:
<section class="clearfix">
<table>
<thead class="title">
<tr>
<th class='date'>Date</th>
<th>Users</th>
<th>Not Ended Session(s)</th>
</tr>
</thead>
<tbody>
<% _.each(data, function(el){ %>
<tr>
<td ><%= el.date %></td>
<td ><%= el.users %></td>
<td ><%= el.not_ended_sessions %</td>
</tr>
< % }); %>
</tbody>
</table>
<p class="Total Session(s)">0</p>
</section>
I have looked various blogs over google, and made changes according suggestions, but still getting same error.
Can someone look into it?
Thanks.
There is a syntax error in the code, the last td
<section class="clearfix">
<table>
<thead class="title">
<tr>
<th class='date'>Date</th>
<th>Users</th>
<th>Not Ended Session(s)</th>
</tr>
</thead>
<tbody>
<% _.each(data, function(el){ %>
<tr>
<td ><%= el.date %></td>
<td ><%= el.users %></td>
<td ><%= el.not_ended_sessions %></td>
</tr>
<% }); %>
</tbody>
</table>
<p class="Total Session(s)">0</p>
</section>
Using underscore templates. Looping through a backbone collection:
<% _.each(venues, function (venue) { %>
<tr>
<td class="text-muted"><%= venue.get('city') %></td>
<td class="text-muted"><%= venue.get('name') %></td>
<td class="text-muted"><%= venue.get('live') == true ? "Yes" : "No" %></td>
<td class="text-muted">$0.00</td>
<td class="blank controls">
<span class="icon icon-edit"></span><span class="text-hide">Edit</span>
</td>
</tr>
<% }); %>
I get:
Uncaught TypeError: Cannot call method 'get' of undefined
If venues is a Backbone.Collection, then it will have all of the underscore iteration methods mixed in.
Try:
<% venues.each(function (venue) { %>
<tr>
<td class="text-muted"><%= venue.get('city') %></td>
<td class="text-muted"><%= venue.get('name') %></td>
<td class="text-muted"><%= venue.get('live') == true ? "Yes" : "No" %></td>
<td class="text-muted">$0.00</td>
<td class="blank controls">
<span class="icon icon-edit"></span><span class="text-hide">Edit</span>
</td>
</tr>
<% }); %>
This is the Units Table:
<div id="table_header">Units</div>
<table class="gridView location">
<tr class="gridViewHeader">
<th><%= check_box("select", "all", {class: 'location'}) %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
<tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %> current_location">
<td><%= check_box("select", "all", {class: 'current_location'}) %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</table>
This is the Selected Units Table:
<div id="table_header">Selected Units</div>
<table class="gridView location">
<tr class="gridViewHeader">
<th><%= check_box("select", "all", {class: 'location'}) %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
<tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %> current_location">
<td><%= check_box("select", "all", {class: 'current_location'}) %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</table>
Image button to push
<%= image_tag("blue_right_arrow.png", id: 'blue_right_arrow', :alt => "arro", title: 'Move to Selected Units') %>
By clicking this button, the selected row from the Units table should transferred to the Selected Units table.
Thanks in advance!.
Modified markup
<div class="table_header">Units</div>
<table class="gridView location" id="units">
<thead>
<tr class="gridViewHeader">
<th><%= check_box("select", "all", {:class => "location"}) %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr class="current_location">
<td><%= check_box("select", "all", {:class => "current_location"}) %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</tbody>
</table>
<div class="table_header">Selected Units</div>
<table class="gridView" id="selected_units">
<thead>
<tr class="gridViewHeader">
<th><%= check_box("select", "all") %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %>">
<td><%= check_box("select", "all") %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</tbody>
</table>
<%= image_tag("blue_right_arrow.png", id: 'blue_right_arrow', :alt => "arro", title: 'Move to Selected Units') %>
Note down the new classes added.
Jquery code
$(document).ready(function() {
#copying the tr
$("#blue_right_arrow").click(function() {
$("input.current_location").each(function(i, el) {
if($(el).is(":checked")) {
$("table#selected_units tbody").append($(el).parent().parent().html());
$(el).remove()
}
});
});
});