In my pdf visualforce, I have a table which iterates over a list of records:
<apex:component controller="SaleInvoiceController" access="global">
<apex:attribute name="saleInvoicePI" assignTo="{!saleInvoiceId}" description="Sale Invoice para la Sale Invoice" type="String"/>
<apex:stylesheet value="{!URLFOR($Resource.PDF_Resources, 'css/saleInvoice.css')}"/>
<div class="header">
<p style="text-align: center;">
<b>
{!parametros.Name}<BR/>
Registered Office: {!parametros.Billing_Street__c}, {!parametros.Billing_City__c}, {!parametros.Billing_Zip_Postal_Code__c}<BR/>
Correspondence Address: {!parametros.Shipping_Street__c}, {!parametros.Shipping_City__c}, {!parametros.Shipping_Zip_Postal_Code__c}<BR/>
Telephone: {!parametros.Phone__c} FAX: {!parametros.Fax__c}<BR/>
<apex:outputText value="{!parametros.Vat__c}" rendered="{!isFoskett}" />
</b>
</p>
<p style="text-align: center;{! IF(isFoskett, 'display:none;' , '') }">
VAT: {!cuenta.CUIT__c}<BR/>
</p>
</div>
<div class="divPage" style="width: 100%;">
<table style="width: 80%;" cellpadding="0" cellspacing="0">
<tr style="height: 100px;">
<td class="tdBorder" style="width: 50%;">
<div><b>{!mainCustomer.Name}</b></div>
<div>{!mainCustomer.BillingStreet}</div>
<div>{!mainCustomer.BillingCity}</div>
<div>{!mainCustomer.BillingCountry}</div>
<div>{!mainCustomer.BillingPostalCode}</div>
</td>
<td class="tdBorder" style="width: 50%;">
<div><b>Date:</b> <apex:outputText value="{0, date, dd/MM/yyyy}"><apex:param value="{!saleInvoice.Date__c}" /></apex:outputText></div>
<div><b>Invoice No:</b> {!saleInvoice.Invoice_Nbr__c}</div>
</td>
</tr>
<tr style="height: 100px;">
<td class="tdBorder">
<div><b>PO #</b> {!soldContainer.PO__c}</div>
</td>
<td class="tdBorder">
<div><b>Transport:</b> {!saleInvoice.Vessell_name__c}</div>
<div><b>Country of Origin:</b> {!saleInvoice.origen_country_name__c}</div>
<div><b>Country of Destination:</b> {!saleInvoice.Destination_Country_name__c}</div>
</td>
</tr>
</table>
<BR/>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Cartons</th>
<th>Description</th>
<th>Gross</th>
<th>Net</th>
<th>Price <span style="display:{!IF(saleInvoice.Euros__c, 'none', 'inline')};">US$</span><span style="display:{!IF(!saleInvoice.Euros__c, 'none', 'inline')};">€</span></th>
<th>Total <span style="display:{!IF(saleInvoice.Euros__c, 'none', 'inline')};">US$</span><span style="display:{!IF(!saleInvoice.Euros__c, 'none', 'inline')};">€</span></th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="5"></th>
<th>Total</th>
</tr>
<tr>
<th class="tdNumber"><apex:outputField value="{!saleInvoice.Total_Packs_1__c}" /></th>
<th></th>
<th class="tdNumber"><apex:outputField value="{!saleInvoice.Kgs_Total_Gross_Weight_1__c}" /></th>
<th class="tdNumber"><apex:outputField value="{!saleInvoice.Kgs_Total_Net_Weight_1__c}" /></th>
<th></th>
<th class="tdNumber">
<apex:outputField value="{!saleInvoice.Total_US__c}" rendered="{!!saleInvoice.Euros__c}" />
<apex:outputField value="{!saleInvoice.Total_Euros__c}" rendered="{!saleInvoice.Euros__c}" />
</th>
</tr>
</tfoot>
<tbody>
<apex:repeat value="{!saleItems}" var="saleItem">
<tr>
<td class="tdNumber"><apex:outputField value="{!saleItem.Packs__c}" /> </td>
<td>
<apex:outputText value="{!saleItem.Description_Another_Components__c}" rendered="{!saleItem.Another_component__c}"/>
<apex:outputText value="{!saleItem.Customaize_Description__c} " rendered="{!!saleItem.Another_component__c}"/>
</td>
<td class="tdNumber"><apex:outputField value="{!saleItem.Kgs_Gross_Weight__c}" rendered="{!!saleItem.Another_component__c}"/> </td>
<td class="tdNumber"><apex:outputField value="{!saleItem.Kgs_Net_Weight__c}" rendered="{!!saleItem.Another_component__c}"/> </td>
<td class="tdNumber">
<apex:outputField value="{!saleItem.USD_Per_Net_Ton__c}" rendered="{!!saleInvoice.Euros__c && !saleItem.Another_component__c}"/>
<apex:outputField value="{!saleItem.Per_Net_Ton__c}" rendered="{!saleInvoice.Euros__c && !saleItem.Another_component__c}"/>
</td>
<td class="tdNumber">
<apex:outputField value="{!saleItem.Total_Item_Amount__c}" rendered="{!!saleInvoice.Euros__c}"/>
<apex:outputField value="{!saleItem.Total_Item_Amount_Euros__c}" rendered="{!saleInvoice.Euros__c}"/>
</td>
</tr>
</apex:repeat>
<tr style="height: 20px;">
<td></td>
<td>{!saleInvoice.First_Payment_Percentage__c}% {!saleInvoice.First_Payment_Conditions__c} </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 20px;display:{!IF(saleInvoice.Second_Payment_Percentage__c>0, 'display', 'none')};">
<td></td>
<td>{!saleInvoice.Second_Payment_Percentage__c}% {!saleInvoice.Second_Payment_Conditions__c} </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 40px;">
<td></td>
<td>
{!saleInvoice.Price_Condition__c} <apex:outputField value="{!saleInvoice.Destination_Port_name__c}"/> <BR/>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 40px;">
<td></td>
<td>
<div style="font-weight: bold;">
Container:
</div>
{!saleInvoice.Purchased_CT_Number__c} <BR/>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 40px;">
<td></td>
<td>
Please arrange payment to our bankers:
<div style="font-weight: bold;">
<BR/>
{!saleInvoice.Bank_Information__r.Name} <BR/>
{!saleInvoice.Bank_Information__r.Beneficiary_Bank_ABA__c} <BR/>
{!saleInvoice.Bank_Information__r.Beneficiary_Bank_Address__c} <BR/>
ACCOUNT NO: {!saleInvoice.Bank_Information__r.Beneficiary_Bank_Account_Nbr__c} <BR/>
{!saleInvoice.Bank_Information__r.Beneficiary_Customer__c} <BR/>
SWIFT: {!saleInvoice.Bank_Information__r.Beneficiary_Bank_Swift_Code__c} <BR/>
IBAN: {!saleInvoice.Bank_Information__r.Beneficiary_Bank_IBAN__c} <BR/>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<br/><br/><br/>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 90%"> </td>
<td style="text-align: center;"><apex:image url="{!digitalSignImage}" width="200px" height="100px"/><br/>{!digitalSignText}</td>
</tr>
</table>
</div>
</apex:component>
CSS:
@page {
margin-top: 3cm;
margin-left: 1.0cm;
margin-right: 1.0cm;
margin-bottom: 0.5cm;
@top-center{
content: element(header);
}
}
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
table {
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
}
table thead tr th {
border: 1px solid black;
text-align: center;
padding: 5px;
}
table tfoot tr th {
border: 1px solid black;
padding: 5px;
}
table tbody tr td {
border-left: 1px solid black;
border-right: 1px solid black;
padding: 5px;
}
div.header {
position: running(header);
}
.tdBorder {
border: 1px solid black;
padding: 5px;
}
.tdNumber {
text-align: right;
}
I want to only render 10 records per page.
I tried using a apex:variable, adding an output panel that renders a div with "page-break-after:always" every 10 iterations, but it affects the width of the table for some reason and the footer is rendered on the first page, and not at the bottom of the table.
Do I have to make logic on the apex side ? or is there a css or some css attributes that can help me achieve this without apex logic? Thanks!
