Visualforce

How to display data in table format in visualforce with pagination

Below is the explanation to display data in table format using pageBlockTable in Visualforce in Salesforce including Pagination.

Go through the code below to understand the business logic and purpose of using pageBlockSection and pageBlockTable tags in visualforce.

Here, in this example, i will show you the demo of displaying accounts fetched by writing a dynamic SOQL query and displaying them in in pageBlockTable

visualforceTable1

 

 

————————————————————————————————————————————-

Create a Visualforce page give any Name and paste the below code.

<apex:page controller=”SearchContact” standardStylesheets=”false”>
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection title=”Contact Details” columns=”1″ >

<apex:inputText label=”Name: ” value=”{!ContactName}”/>

<apex:outputText label=”Country: “>
<apex:selectList value=”{!selectedCountry}” multiselect=”false” size=”1″>
<apex:selectOptions value=”{!countryOptions}”>
</apex:selectOptions>
</apex:selectList>
</apex:outputText>

<apex:outputText label=”Gender: “>
<apex:selectList value=”{!selectedGender}” multiselect=”false” size=”1″>
<apex:selectOptions value=”{!genderOptions}”>
</apex:selectOptions>
</apex:selectList>
</apex:outputText>

<apex:pageBlockSectionItem >
<apex:commandButton value=”Search” action=”{!searchContact}”/>
<apex:commandButton value=”Reset” action=”{!reset}” />
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>

<apex:pageBlock rendered=”{!resultTable}”>
<apex:pageBlockSection title=”Contact Search Results” >
<apex:pageBlockTable columns=”4″ value=”{!wrapContactList}” var=”contact” rendered=”{!IF(displayContacts.size!=0,true,false)}” >
<apex:column headerValue=”SELECT”>
<apex:inputCheckbox value=”{!contact.isSelected}”/>
</apex:column>
<apex:column headerValue=”NAME” value=”{!contact.cont.name}”/>
<apex:column headerValue=”COUNTRY” value=”{!contact.cont.Country__c}”/>
<apex:column headerValue=”GENDER” value=”{!contact.cont.Gender__c}”/>
</apex:pageBlockTable>
</apex:pageBlockSection>

<apex:pageBlockSection >
<apex:outputText value=”Showing page {!page} of {!totalpages}”></apex:outputText>
</apex:pageBlockSection>

<apex:pageBlockSection >
<apex:commandButton action=”{!selectedProcess}” value=”Show Selected Accounts” rendered=”{!IF(displayContacts.size!=0,true,false)}”/>
</apex:pageBlockSection>

<apex:pageBlockButtons location=”bottom”>
<apex:commandButton value=”First” disabled=”{!firstButtonDisabled}” action=”{!onClickFirst}”/>
<apex:commandButton value=”Previous” disabled=”{!previousButtonDisabled}” action=”{!onClickPrevious}”/>
<apex:commandButton value=”Next” disabled=”{!NextButtonDisabled}” action=”{!onClickNext}”/>
<apex:commandButton value=”Last” disabled=”{!LastButtonDisabled}” action=”{!onClickLast}”/>

</apex:pageBlockButtons>

<apex:pageBlockSection rendered=”{!IF(wrapContactList.size = 0, true, false)}”>
<b> No Records Found.</b>
</apex:pageBlockSection>

</apex:pageBlock>

<apex:pageBlock rendered=”{!selectedtable}”>
<apex:pageBlockSection title=”Selected Cont

act Details” >
<apex:pageBlockTable columns=”3″ value=”{!sel

ectedContacts}” var=”contactselected” rendered=”{!IF(displayContacts.size!=0,true,false)

}”>

<apex:column headerValue=”NAME” value=”{!contactselected.name}”/>
<apex:column headerValue=”COUNTRY” value=”{!contactselected.Country__c}”/>
<apex:column headerValue=”GENDER” value=”{!contactselected.Gender__c}”/>
</apex:pageBlockTable>

</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

————————————————————————————————————————————

Now Create a Apex class and make sure in the visualforce page you provide this apex class name as your controller name:

 

public with sharing class SearchContact {
public String ContactName {get; set;}
public String selectedCountry {get; set;}
public String selectedGender {get; set;}
public String error {get; set;}

public Integer totalPages {get; set;}
public Integer page {get; set;}
// public integer recordtodisplay{get;set;}

public boolean resultTable {get; set;}
public boolean selectedtable {get;set;}
public boolean isSelected {get; set;}
public boolean firstButtonDisabled {get;set;}
public boolean previousButtonDisabled {get;set;}
public boolean nextButtonDisabled {get;set;}
public boolean lastButtonDisabled {get;set;}

public list<Contact> displayContacts {get; set;}
public List<Contact> selectedContacts {get;set;}
public List<WrapContact> wrapContactList {get;set;}

public String empty = ”;
public String emptyQuery = ”;
public Integer maxLimit;
public Integer totalRecords;
public Integer firstrecord;
public Integer counter;
public Integer recordstodisplay;

public SearchContact(){
resultTable = false;
isSelected = false;
selectedtable = false;
firstButtonDisabled = true;
previousButtonDisabled = true;
nextButtonDisabled = true;
lastButtonDisabled = true;
maxLimit = 10;
totalPages = 0;
page = 1;
counter = 0;
recordstodisplay=0;
getCountryOptions();
getGenderOptions();

}

public List<SelectOption> getCountryOptions(){
List<SelectOption> countryOptions = new List<SelectOption>();
countryOptions.add(new SelectOption(”,’–None–‘));
countryOptions.add(new SelectOption(‘India’,’India’));
countryOptions.add(new SelectOption(‘Japan’,’Japan’));
countryOptions.add(new SelectOption(‘Russia’,’Russia’));
countryOptions.add(new SelectOption(‘Spain’,’Spain’));
countryOptions.add(new SelectOption(‘Austria’,’Austria’));

return countryOptions;
}

public List<SelectOption> getGenderOptions(){
List<SelectOption> genderOptions = new List<SelectOption>();
genderOptions.add(new SelectOption(”,’–None–‘));
genderOptions.add(new SelectOption(‘Male’,’Male’));
genderOptions.add(new SelectOption(‘Female’,’Female’));

return genderOptions;
}

public void searchContact(){

displayContacts = new List<Contact>();
wrapContactList = new List<wrapContact>();
emptyQuery = ”;
//page = 1;
System.debug(‘Name: ‘+ContactName);
System.debug(‘Country: ‘+selectedCountry);
System.debug(‘Gender: ‘+selectedGender);
String query = ‘select id,name,country__c,gender__c from Contact where LastName!=:empty’;

if(ContactName!=empty){
emptyQuery +=’ AND Name=\”+ContactName+’\”;
}

if(selectedCountry!=empty && selectedCountry!=null){
emptyQuery +=’ AND Country__c=\”+selectedCountry+’\”;
}

if(selectedGender!=empty && selectedGender!=null){
emptyQuery +=’ AND Gender__c=\”+selectedGender+’\”;
}

emptyQuery += ‘ Order by FirstName ‘;

query += emptyQuery;
//counter =1;
System.debug(‘Query: ‘+query);
displayContacts = Database.query(query);
System.debug(‘displayContacts size = ‘+displayContacts.size());

totalRecords = displayContacts.size();
if(totalRecords>maxLimit){
for(integer i =0;i<maxLimit;i++){
wrapContactList.add(new wrapContact(displayContacts.get(i)));

}
nextButtonDisabled = false;
lastButtonDisabled = false;
}
else{
for(integer i =0;i<totalRecords;i++){
wrapContactList.add(new wrapContact(displayContacts.get(i)));
}
lastButtonDisabled = true;
nextButtonDisabled = true;
}

Integer remainder = math.mod(totalRecords, maxLimit);
if (remainder == 0) {
totalPages = totalRecords / maxLimit;
} else {
totalPages = totalRecords / maxLimit;
totalPages++;
}

resultTable = true;
}

public void onClickNext(){
page++;
wrapContactList.clear();
counter = counter+10;
recordstodisplay= counter + maxLimit;

if(recordstodisplay < totalRecords){
for(integer i =counter;i<recordstodisplay;i++){
System.debug(displayContacts.get(i));
wrapContactList.add(new wrapContact(displayContacts.get(i)));
}
firstButtonDisabled =false;
previousButtonDisabled = false;

}
else{
for(integer i =counter;i<totalRecords;i++){
System.debug(displayContacts.get(i));
wrapContactList.add(new wrapContact(displayContacts.get(i)));
}
nextButtonDisabled = true;
lastButtonDisabled = true;
firstButtonDisabled = false;
previousButtonDisabled = false;
}

}

public void onClickPrevious(){
page–;
wrapContactList.clear();
counter = counter – maxLimit;
recordstodisplay= counter + maxLimit;
if (counter <= 0) {
firstButtonDisabled = true;
previousButtonDisabled = true;
nextButtonDisabled = false;
lastButtonDisabled = false;
}
else{
firstButtonDisabled = false;
previousButtonDisabled = false;
nextButtonDisabled = false;
lastButtonDisabled = false;
}
for(Integer i = counter;i<recordstodisplay;i++){
wrapContactList.add(new wrapContact(displayContacts.get(i)));
}

}
public void onClickLast(){
page = totalPages;
firstButtonDisabled = false;
previousButtonDisabled = false;
nextButtonDisabled = true;
lastButtonDisabled = true;
wrapContactList.clear();
if(Math.mod(totalRecords,maxLimit)==0){
counter = (maxLimit * (totalRecords/maxLimit))-1;
}else{
counter = maxLimit * (totalRecords/maxLimit);
}
for(integer i = counter;i<totalRecords;i++){
wrapContactList.add(new wrapContact(displayContacts.get(i)));
}
}

public void onClickfirst(){
page=1;
counter=0;
wrapContactList.clear();
if(totalRecords>maxLimit){
for(integer i =0;i<maxLimit;i++){
wrapContactList.add(new wrapContact(displayContacts.get(i)));

}
nextButtonDisabled = false;
lastButtonDisabled = false;
}
else{
for(integer i =0;i<totalRecords;i++){
wrapContactList.add(new wrapContact(displayContacts.get(i)));
}
lastButtonDisabled = true;
nextButtonDisabled = true;
}

}

public void selectedProcess(){
selectedContacts = new List<Contact>();
System.debug(‘wrapContactList = ‘+wrapContactList);
for(WrapContact wrapc : wrapContactList){
if(wrapc.isSelected==true){
selectedContacts.add(wrapc.cont);
}
}
if(selectedContacts!= null || !selectedContacts.isEmpty()){
selectedtable=true;
resulttable = false;
System.debug(‘selectedContacts = ‘+selectedContacts);
}

}

public class WrapContact{
public boolean isSelected {get; set;}
public Contact cont {get; set;}

public WrapContact(Contact c){
cont = c;
isSelected = false;
}

}

public PageReference reset() {
PageReference newpage = new PageReference(System.currentPageReference().getURL());
newpage.setRedirect(true);
return newpage;
}

}

If you find this information useful feel free to Like, Share and comment!

Stay Connected for more interesting SFDC content.If you have any doubt in understanding anything from the above given Explanation, you can always comment your doubts in the comments section.

Thank You!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s