visualforce page component for pagination in salesforce.com

What is pagination in salesforce?
sometimes we have to show records in a table and the number of records that have to be shown are too many say 100.
In this case the better user interfcae would be,
user see's these records page wise say 10 records per page. This would require buttons to navigate from page to page also buttons to go directly to last page or first page.
This is called pagination.
 Well, salesforce provides object standardSetcontroller for implementing pagination wherein you can access first page, last page, navigate to next or previous page.

I have made a generic component to implement pagination. Here you only have to pass the list of recodrs you want to show up using pagination also you have to pass the columns fields you desire to display.

Following is a visualforce component for pagination:

Here you have to pass the list of records(whichever object it may be) you want to display in table and the column fields to display.


Visualforce component

<apex:component controller="ComponentController">
  <apex:attribute name="listo" description="This is color for the border." type="contact[]" required="false" assignTo="{!idList}"/>
  <apex:attribute name="listofield" description="This is color for the border." type="string[]" required="false" assignTo="{!SobjFieldList}"/>     
     
    <apex:form >
       <apex:pageblock id="pg">
          <apex:pageBlockTable value="{!SObjectRecs}" var="rec">
             <apex:repeat value="{!FieldList}" var="fl">
                <apex:column value="{!rec[fl]}"/>
             </apex:repeat> 
          </apex:pageBlockTable>
       
          <apex:panelGrid columns="7">
             <apex:commandButton status="fetchStatus" reRender="pg" value="First" action="{!setRecords.first}" disabled="{!!setRecords.HasPrevious}" />
             <apex:commandButton status="fetchStatus" reRender="pg" value="Previous" action="{!setRecords.previous}" disabled="{!!setRecords.HasPrevious}" />
             <apex:commandButton status="fetchStatus" reRender="pg" value="Next" action="{!setRecords.next}" disabled="{!!setRecords.HasNext}" />
             <apex:commandButton status="fetchStatus" reRender="pg" value="Last" action="{!setRecords.last}" disabled="{!!setRecords.HasNext}"/>
             <apex:outputPanel style="color:green;">
                  <apex:actionStatus id="fetchStatus" startText="Fetching..." stopText=""/>
             </apex:outputPanel>
          </apex:panelGrid>
       </apex:pageblock>
    </apex:form>
 
</apex:component>


Controller asociated with the vf component

public class ComponentController {

public List<sObject> idList{get;set;}
Public List<String> SobjFieldList{get;set;}
  
  Public ApexPages.StandardSetController setRecords{
    get{
     if(setRecords == null){
        setRecords = new ApexPages.StandardSetController(getIdListRecrds());
        setRecords.setPageSize(4);
     }  
      return setRecords;
    }set;
   }
    
   Public List<sObject> getSObjectRecs(){
        List<sObject> sObjList = New List<sObject>();
        for(sObject SObj :(List<sObject>)setRecords.getRecords())
            sObjList.add(SObj); 
        return  sObjList ;   
   }
   
   Public List<String> FieldList{
       get{
       List<String> FieldList = New List<string>();
       FieldList = getSobjtFieldList();
       return FieldList;
       }set;
   }
   
    public List<sObject> getIdListRecrds() {
       List<sObject> IdListRecrds =idList;
       return IdListRecrds;
    }
    
    public List<string> getSobjtFieldList() {
       List<String> FieldList = SobjFieldList;
       return FieldList ;
    }

}
Example that calls the component:

conList is the list of records that you want to display in table with pagination and conFieldList are fields to be displayed in columns.

VF page:

<apex:page controller="PaginationController">
  <c:PaginationComponent listo="{!conList}" listofield="{!ConFieldList}"/>
</apex:page>

Controller:

public with sharing class PaginationController {
Public List<contact> conList {get;set;}
Public List<String> ConFieldList{get;set;}

    public PaginationController (){
      conList = New List<Contact>();
      ConFieldList = New List<string>();
      conList = [select Department,primary_Contact__c,name,id,email,phone from contact limit 20];
      ConFieldList.add('Name');
      ConFieldList.add('primary_Contact__c');
      ConFieldList.add('Email');
      ConFieldList.add('Phone');
      ConFieldList.add('Department');
    }
}

6 comments:

  1. I need to list the contacts in table with pagination while clicking submit button.

    I used your component for pagination.

    But no rows displayed in the table.

    Help me in this.

    ReplyDelete
    Replies
    1. you will have to pass the list of records to this list "conList" in the above example,... make sure you build your list before calling the vf component... as in the above example the list is build in the constuctor itself...

      Delete
  2. Here is my controller:

    public with sharing class returncontactresult1{
    Public Contact con{get;set;}
    Public List conList {get;set;}
    Public List ConFieldList{get;set;}
    Public returncontactresult1(ApexPages.StandardController controller) {
    con = new Contact();
    conList = New List();
    ConFieldList = New List();
    }

    public void listcontacts()
    {
    conList = [select id, Name, Email, Phone from Contact where Accountid=:con.Accountid limit 20]; system.debug('conList======================================================='+conList );
    ConFieldList.add('Name');
    ConFieldList.add('Email');
    ConFieldList.add('Phone');
    }

    }

    I am calling the listcontacts() in submit button action. Here query is executed and "conList" is assigned by its records.

    After the submit action, i am calling "PaginationComponent" in VF page.

    But no records listed in the table.

    ReplyDelete
  3. you are calling methode on button press, that will populate list with values but your vf component will not get those values... just try doing it in constructor or methode called from page load...

    ReplyDelete
  4. Please add picklist for to select size like 10,20,30,40...Actually I'm trying but its showing error in parsing list of records

    ReplyDelete


  5. Hi that means it only work for contacts .

    If i want to do for all objects what i have to do .

    ReplyDelete