Dear Team,
Greetings of the day
I want to repeat the a table details for every page in the print format.It is only showing in the first page,But i want to show in every page if the data comes in the multiple pages.
Please Give me any solution on this. Your solution is more appreciable
I am using the jinja code as shown below
<style>
table {
/*width:100%;*/
border-collapse: collapse !important;
/*table-layout: fixed;*/
}
body {
/*font-family: Calibri;*/
font-family: "Times New Roman", Times, serif !important;
font-size: 10px;
margin: 0 !important;
padding: 0 !important;
}
.table-data {
width: 20% !important;
}
.invoice-container {
width: 100%;
/*max-width: 680px;*/
margin: 0 0 !important;
/*padding: 10px;*/
box-sizing: border-box;
}
.invoice-table thead th .invoice-table thead td {
border: 1px solid #000;
text-align: left;
/*width: 20% !important;*/
}
.invoice-table thead th {
border: 1px solid #000;
border-collapse: collapse !important;
}
.invoice-table table {
border-collapse: border !important;
}
.invoice-table tbody td:first-child,
.invoice-table tbody td:nth-child(1) {
text-align: left;
}
/*.invoice-table tbody tr:nth-child(40n) {*/
/* page-break-after: always;*/
/*}*/
.invoice-table tfoot td {
border-top: 1px solid #000;
font-weight: bold;
padding: 5px;
text-align: right;
}
.summary-table {
width: 100%;
border-collapse: collapse;
}
.qr-section {
border: 1px solid #000;
padding: 10px;
font-family: Arial, sans-serif;
/*height: 110px;*/
width: 100%;
box-sizing: border-box;
/*margin-top: 10px;*/
/*page-break-inside: avoid;*/
}
.qr {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.qr td {
padding: 15px 10px;
text-align: center;
vertical-align: middle;
font-size: 10px;
}
/*.qr td:first-child img {*/
/* width: 90px;*/
/* height: 90px;*/
/*}*/
.print-format th,
.print-format td {
padding: 0px !important;
vertical-align: middle !important;
}
.summary-table td {
padding: 3px;
font-size: 10px;
}
.print-format img {
max-width: 80%;
}
.print-format {
padding: 0 !important;
}
.print-format-preview {
padding: 0 !important;
}
td {
padding: 5px;
/* Optional: Add padding inside cells for better readability */
text-align: left;
/* Adjust as needed */
}
@media print {
.print-format {
padding: 0 !important;
margin: 0 !important;
}
/* Make sure the first table header repeats on every page */
.invoice-table thead {
display: table-header-group !important; /* Ensure the header group is repeated */
}
/* Prevent page breaks within the table */
.invoice-table tbody tr {
page-break-inside: avoid !important; /* Prevent rows from breaking */
}
/* Ensure that the table breaks between pages properly */
.invoice-table {
width: 100%;
border-collapse: collapse !important;
page-break-inside: avoid !important; /* Avoid breaks inside the table */
}
/* Optional: force page break before the table to avoid issues */
.header {
page-break-before: always !important;
}
/* Keep the table header visible at the top of each page */
.invoice-table thead tr {
display: table-header-group !important;
}
/* Make sure the content doesn't break in the middle of the row */
.invoice-table tbody {
page-break-inside: auto !important;
}
.invoice-container {
width: 100%;
/*max-width: 680px;*/
margin: 0 0 !important;
/*padding: 10px;*/
box-sizing: border-box;
padding: 0 !important;
}
.print-format {
padding: 0 !important;
}
.print-format-preview {
padding: 0 !important;
}
/*.footer {*/
/* position: relative;*/
/*}*/
.hide-on-print {
display: none;
}
.footer {
position: fixed;
bottom: -40px;
width: 100%;
/*left:0;*/
text-align: center;
font-size: 10px;
/*margin-top: 100px;*/
}
.page-footer {
/*display: block;*/
margin-top: 20px;
font-weight: bold;
text-align: center;
/*margin-left: 210px;*/
border-top: 1px solid black !important;
border-bottom: 1px solid black !important;
}
/*.qr-section:last-of-type {*/
/* page-break-before: always;*/
/*}*/
/*.qr-section {*/
/* page-break-after: auto;*/
/*}*/
}
.company-address {
border-top: 1px solid black;
/*margin-top: 100px;*/
font-size: 10px;
/*padding: 0px;*/
}
/*.invoice-table {*/
/* table-layout: fixed;*/
/* width: 100%;*/
/*}*/
.w-25 {
width: 25% !important;
}
.text-right {
text-align: right !important;
}
.m-0 {
margin: 0 !important;
}
.text-center {
text-align: center !important;
}
.item-table thead th:first-child {
width: 60px !important;
}
.item-table tbody td:first-child {
width: 60px !important;
}
.item-table th,
td {
font-size: 16px;
}
.print-format {
padding: 0 !important;
}
</style>
<div class="header">
<table class="invoice-table">
<tbody>
<tr>
<td colspan="4" style="text-align: center; border: none;">
<img src="{{ company_logo_base }}" alt="" style="width: 100px;">
<h2>{{invoice_category}}</h2>
</td>
</tr>
<tr>
{% set company_doc = frappe.db.get_list("company", filters={"name": company},
fields=["company_name", "state", "pincode"]) %}
<td style="vertical-align: top; width: 20%;">
{% if invoice_type == "B2C"%}
<p>
<strong>Supplier Details:</strong><br>
{{supplier_name or ""}}<br>
{{supplier_tin_number or ""}}<br>
{{supplier_registration_no or ""}}<br>
{{supplier_tourism_tax_registration_no or ""}}<br>
{{supplier_city or ""}}<br>
{{supplier_pin_code or ""}}<br>
{{supplier_email or ""}}
</p>
<p style="margin: 1;white-space:nowrap;">Guest TIN :- {{ gst_number or ""}}<br>
Guest Name :- {{ guest_name or ""}}</p>
{% endif %}
{% if invoice_type != "B2C"%}
<p>
<strong>Supplier Details:</strong><br>
{{supplier_name or ""}}<br>
{{supplier_tin_number or ""}}<br>
{{supplier_registration_no or ""}}<br>
{{supplier_tourism_tax_registration_no or ""}}<br>
{{supplier_city or ""}}<br>
{{supplier_pin_code or ""}}<br>
{{supplier_email or ""}}
</p>
<p>
<strong>Buyer Details:</strong><br>
{{ legal_name or ""}}<br>
{{ supplier_address_1 }},<br>
{{ supplier_address_2 }},<br>
{{ supplier_city }},<br>
{{ supplier_pin_code }}
</p>
<p>
Guest TIN- {{ gst_number or ""}}<br>
<b>Guest Name- </b>{{ guest_name or ""}}
</p>
{% endif %}
</td>
<td style="border: none; text-align: left; white-space: nowrap;"></td>
<td style="border: none; text-align: left;white-space:nowrap; padding-left:100px !important">
Folio No.<br>
Room No.<br>
Confirmation No.<br>
Arrival<br>
Departure<br>
Invoice Date<br>
Invoice No<br>
SST No<br>
TTX No<br>
</td>
<td style="border: none; text-align: right;white-space:nowrap;">
<p>{{ folioid or ""}}<br>{{room_number or ""}}<br>{{ confirmation_number or
""}}<br>{{ frappe.utils.format_datetime(arrival_date, 'dd-MM-yyyy HH:mm:ss') or ""}}<br>{{
frappe.utils.format_datetime(depature_date, 'dd-MM-yyyy HH:mm:ss') or ""}}<br>{{
frappe.utils.formatdate(invoice_date, 'dd-MM-yyyy')
or ""}}<br>{{ invoice_number or ""}}<br>{{ sst_registration_number or ""}}<br>{{
tax_invoice_referrence_number or ""}}<br></p>
</td>
</tr>
</tbody>
</table>
</div>
<table class="item-table" style="width:100%">
<thead>
<tr style="border-top:1px solid !important;border-bottom:1px solid !important">
<th style="border-right:none !important;border-left:none !important;border:top:1px !important;">
<b>Date</b></th>
<th style="border-right:none !important;border-left:none !important;text-align:left;">
<b>Description</b></th>
<th style="border-right:none !important;border-left:none !important;text-align:left;">Check No</th>
<th style="border-right:none !important;border-left:none !important;text-align:right;">
<b>Charges</b></th>
<th style="border-right:none !important;border-left:none !important;text-align:right;">
<b>Credits</b></th>
</tr>
</thead>
<tbody>
{% for i in inv_data %}
<tr>
<td style="" class="table-data">{{ frappe.utils.formatdate(i.date, 'dd-MM-yyyy') if i.date else ""}}
</td>
<td style="white-space:nowrap;">{{ i["name"] or ""}}</td>
<td>{{i.item_reference or ""}}</td>
<td style="text-align: right;">{{ i["item_value"] or "" }}</td>
<td style="text-align: right;">{{ i["FT_CREDIT"] or "" }}</td>
</tr>
{% endfor %}
<tr style="border-top:1px solid;border-bottom:1px solid;">
<td></td>
<td colspan="3">
<div style="display: flex; justify-content: flex-end; align-items: center;">
<span style="margin-right: 10px;"><b>Total:</b></span>
<span>{{ "%.2f" | format(amount_after_gst or 0.0) }}</span>
</div>
</td>
<td class="text-right ">{{ "%.2f" | format(total_payment_credit_amount or 0.00) }}</td>
</tr>
</tbody>
</table>
<div class="summary-section">
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td colspan="3" style="text-align: right; padding-right: 10px; width: 80%;"><strong>Total Before
Taxes:</strong></td>
<td style=" width: 20%;padding-left:40px;">RM {{ "%.2f" | format(amount_before_gst or
0.0) }}</td>
</tr>
{% for i in gst_summary %}
<tr>
<td colspan="3" style="text-align: right; padding-right: 10px; width: 80%;"><strong>{{ i.tax_type }}
{{ i.tax_percentage }}%:</strong></td>
<td style="width: 20%;padding-left:40px;">RM {{ "%.2f" | format(i.amount or 0.0) }}</td>
</tr>
{% endfor %}
<tr>
<td colspan="3" style="text-align: right; padding-right: 10px; width: 80%;"><strong>Tourism
Tax:</strong></td>
<td style=" width: 20%;padding-left:40px;">RM {{ "%.2f" | format(tourism_tax_amount
or 0.0) }}</td>
</tr>
<tr>
<td colspan="3" style="text-align: right; padding-right: 10px; width: 80%;"><strong>Total Invoice
Value:</strong></td>
<td style=" width: 20%; padding-left:40px;">RM {{ "%.2f" | format(amount_after_gst
or 0.0) }}</td>
</tr>
</table>
</div>
{% if (invoice_type == "B2C" and (consolidated == 1 or has_tourism_tax_item == 1) and irn_generated ==
"Success") or (invoice_type == "B2B" and irn_generated == "Success")%}
<div class="qr-section">
<table class="qr">
<tr style="vertical-align:middle">
<td><img style="width:80px" src="{{ qr_code_image }}" alt="QR Code"></td>
<!--<td></td>-->
<td><b>{{ lhdn_uuid or ""}}</b><br>UUID</td>
<td class="qr-border"><b>{{ frappe.utils.format_datetime(irn_generated_time, 'dd-MM-yyyy HH:mm:ss')
or ""}}</b><br>Time</td>
</tr>
</table>
</div>
{% endif %}
<footer class="footer">
{% set company = frappe.db.get_list("company", filters={"name": company}, fields=["address_1", "state",
"pincode"]) %}
<div class="company-address">
Company Address: {{ supplier_address_1 }}, {{ supplier_address_2 }}, {{supplier_city}} <br>{{
company[0].state }}, {{ supplier_pin_code }}
</div>
</footer>
</div>