Adding pagination to the Visualforce page
When you are starting your adventure with Salesforce, adding pagination might pose some problems. There are plenty of ways of doing this and in today’s blog I’m going to show you my approach which I believe to be fairly easy and straightforward.
At first, in order to implement pagination to your Visualforce page, let’s separate this whole process into two parts: apex controller and visualforce markup. Let’s start with the apex part even though it may seem more complex.
Apex controller
What is necessary for pagination is some sort of list controller. We will call it OrderListIterable. It is an inner class inside the pages controller that implements the Iterator interface for a List of wrapper class objects (OrderPageObject). Its purpose is to control which part of the list should be displayed based on the state of a table. This Iterable class has 4 attributes:
public List<OrdersB2BPageObject> innerList {get;set;}
public List<OrdersB2BPageObject> listRequested {get;set;}
public Integer i {get;set;}
public Integer setPageSize {get;set;}InnerList consist of all orders that should be used inside a table. When it comes to ListRequested it is a list that should be displayed at any given time for a user, based on how many elements should be displayed (setPageSize) and which side should they be displayed. That’s what the “i” parameter stands for.
The constructor takes only a list of wrapper class orders and assigns them into the innerList. The rest of attributes is just initialized.
public OrderB2BListIterable(List<OrdersB2BPageObject> orders) {
innerList = new List<OrdersB2BPageObject>();
listRequested = new List<OrdersB2BPageObject>();
innerList = orders;
setPageSize = 10;
i = 0;
}
The class itself contains 4 methods:
- hasNext(),
- hasPrevious(),
- next(),
- previous()
First two just return a boolean which check whether the innerList contains elements that needs to be added to the requestedList for next or previous button (in the visualforce page). The other 2 methods are responsible for providing the list of objects inside listRequested (size is dependent on the setPageSize attribute). And now brace yourself for a quite long example which contains these 4 methods:
hasNext()
public boolean hasNext() {
if (i >= innerList.size()) {
return false;
} else {
return true;
}
}hasPrevious()
public boolean hasPrevious() {
if (i <= setPageSize) {
return false;
} else {
return true;
}
}next()
public List<OrdersB2BPageObject> next() {
listRequested = new List<OrdersB2BPageObject>();
Integer startNumber;
Integer size = innerList.size();
if (hasNext()) {
if (size <= (i + setPageSize)) {
startNumber = i;
i = size;
} else {
i = (i + setPageSize);
startNumber = (i - setPageSize);
}
for (Integer start = startNumber; start < i; start++) {
listRequested.add(innerList[start]);
}
}
return listRequested;
}
previous()
public List<OrdersB2BPageObject> previous() {
listRequested = new List<OrdersB2BPageObject>();
Integer size = innerList.size();
if (i == size) {
if (Math.mod(size, setPageSize) > 0) {
i = size - Math.mod(size, setPageSize);
} else {
i = (size - setPageSize);
}
} else {
i = (i - setPageSize);
}
for (Integer start = (i - setPageSize); start < i; start++) {
System.debug(i + ', ' + setPageSize);
listRequested.add(innerList[start]);
}
return listRequested;
}
}Visualforce page
And finally let us move on to the Visualforce page part which is of course way shorter:
<apex:outputPanel>
<apex:commandButton value="{!$Label.previous}" action="{!previous}" rendered="{!hasPrevious}"
reRender="ThePage"/>
<apex:commandButton value="{!$Label.next}" action="{!next}" rendered="{!hasNext}"
reRender="ThePage"/>
</apex:outputPanel>As you can see in this brief example, two buttons are added to the outputPanel. They rerendered the table after each click and render itself depending on whether the list has any further or previous elements. The pageBlockTable uses the list which is called listController, which uses values from listRequested.
I hope that you can wrap your head around all of this stuff and implement it correctly to your personal projects. Good luck!
