Show row number in page block table
You may also be able to use the CSS counter syntax to generate the numbers purely client-side:
#myTable {
counter-reset: section;
}
#myTable .row {
counter-increment: section;
}
#myTable .row .counter::before {
content: counter(section);
}
Where "#myTable" is the ID for the table you're generating, "row" is a class for each row element, and "counter" is a class for each counter:
<table id="myTable">
<tbody>
<apex:repeat value="{!rows}" var="row">
<tr class="row">
<td>
<span class="counter"></span>
</td>
</tr>
</apex:repeat>
</tbody>
</table>
Edit: Here's a fully functional example using a standard controller:
<apex:page standardController="Account" recordSetVar="records">
<style>
.myTable {
counter-reset: rowCounter;
}
.myTable .row {
counter-increment: rowCounter;
}
.myTable .row .counter::before {
content: counter(rowCounter);
}
</style>
<apex:pageBlock>
<apex:pageBlockTable value="{!records}" var="record" styleClass="myTable" rowClasses="row">
<apex:column>
<span class="counter"></span>
</apex:column>
<apex:column value="{!record.Name}" />
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>
You can use an apex:variable
, as shown in the code below, to show a row number.
<apex:variable var="index" value="{!1}"/>
<apex:repeat value="{!yourList}" var="ob">
<apex:outputLabel value="{!index}"/>
<apex:variable var="index" value="{!index+1}"/>
</apex:repeat>