We sometimes need to display many records on UI, so it doesn't look good when you display 10000 records on single page. Pagination is the best option you can opt for.
Now question is how you can apply pagination in salesforce with native salesforce look and feel. So here is the answer of this.
Visualforce Page Code :
<apex:page controller="pagingControllerForUser">
<apex:form >
<apex:pageBlock >
<apex:pageMessages id="pgm"/>
<apex:pageBlockButtons >
<apex:commandButton value="Search" action="{!Search}"/>
</apex:pageBlockButtons>
<apex:pageBlockSection >
<apex:pageBlockSectionItem >
<apex:outputLabel value="User Name"/>
<apex:inputText value="{!usr.Name}"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:pageBlock rendered="{!IF(AllSearchUsers.size != null && AllSearchUsers.size > 0, true , false)}">
<apex:outputPanel layout="block" styleClass="pSearchShowMore" id="otpNav2">
Total Records Found: <apex:outputText rendered="{!IF(Con.resultSize==10000,true,false)}">10000 +</apex:outputText><apex:outputText rendered="{!IF(Con.resultSize < 10000,true,false)}">{!Con.resultSize}</apex:outputText>
<apex:image url="/img/search_prevarrow_disabled.gif" styleClass="prevArrow" rendered="{!NOT(Con.HasPrevious)}"/>
<apex:image url="/img/search_prevarrow.gif" title="Previous Page" styleClass="prevArrow" rendered="{!Con.HasPrevious}"/>
<apex:commandLink action="{!Previous}" title="Previous Page" value="Previous Page" rendered="{!Con.HasPrevious}"/>
<apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasPrevious)}">Previous Page</apex:outputPanel>
({!IF(Con.PageNumber == 1,1,((Con.PageNumber -1) * Con.PageSize)+1)}-{!IF(Con.resultSize < Con.PageSize,Con.resultSize,Con.PageNumber * Con.pageSize)})
<apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasNext)}">Next Page</apex:outputPanel>
<apex:commandLink title="Next Page" value="Next Page" rendered="{!Con.HasNext}" action="{!Next}"/>
<apex:image url="/img/search_nextarrow.gif" title="Next Page" styleClass="nextArrow" rendered="{!Con.HasNext}"/>
<apex:image url="/img/search_nextarrow_disabled.gif" rendered="{!NOT(Con.HasNext)}"/>
</apex:outputPanel>
<apex:pageBlockSection columns="1">
<apex:pageBlockTable value="{!AllSearchUsers}" var="UR">
<apex:column headerValue="Name" value="{!UR.Name}"/>
<apex:column headerValue="Email" value="{!UR.Email}"/>
<apex:column headerValue="Phone" value="{!UR.Phone}"/>
<apex:column headerValue="Department" value="{!UR.Department}"/>
</apex:pageBlockTable>
</apex:pageBlockSection>
<apex:outputPanel layout="block" styleClass="pSearchShowMore" id="otpNav">
Total Records Found: <apex:outputText rendered="{!IF(Con.resultSize==10000,true,false)}">10000 +</apex:outputText><apex:outputText rendered="{!IF(Con.resultSize < 10000,true,false)}">{!Con.resultSize}</apex:outputText>
<apex:image url="/img/search_prevarrow_disabled.gif" styleClass="prevArrow" rendered="{!NOT(Con.HasPrevious)}"/>
<apex:image url="/img/search_prevarrow.gif" title="Previous Page" styleClass="prevArrow" rendered="{!Con.HasPrevious}"/>
<apex:commandLink action="{!Previous}" title="Previous Page" value="Previous Page" rendered="{!Con.HasPrevious}"/>
<apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasPrevious)}">Previous Page</apex:outputPanel>
({!IF(Con.PageNumber == 1,1,((Con.PageNumber -1) * Con.PageSize)+1)}-{!IF(Con.resultSize < Con.PageSize,Con.resultSize,Con.PageNumber * Con.pageSize)})
<apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasNext)}">Next Page</apex:outputPanel>
<apex:commandLink title="Next Page" value="Next Page" rendered="{!Con.HasNext}" action="{!Next}"/>
<apex:image url="/img/search_nextarrow.gif" title="Next Page" styleClass="nextArrow" rendered="{!Con.HasNext}"/>
<apex:image url="/img/search_nextarrow_disabled.gif" rendered="{!NOT(Con.HasNext)}"/>
</apex:outputPanel>
</apex:pageBlock>
</apex:form>
</apex:page>
This page will show a input field where you can enter user name to be searched. Now when you click search all user by that name get searched, lets say I search with "Test Test". I have 8 users with that name in my organisation. 5 record will be shown at a time on screen, it will be displayed like this.
When we click "Next Page" next 5 records will be displayed, in this case 3 records. Screen will come up like this.
Apex Code :
public class pagingControllerForUser
{
public List<User> AllSearchUsers
{
get
{
if(con != null)
return (List<User>)con.getRecords();
else
return null ;
}
set;}
public User usr {get; set;}
//Controller
public pagingControllerForUser()
{
AllSearchUsers = new List<User>() ;
usr = new User() ;
}
public PageReference Search()
{
if(usr.Name != null)
{
con = new ApexPages.StandardSetController(Database.getQueryLocator([select Id , name , email , phone, Department from User where name = :usr.Name]));
// sets the number of records in each page set
con.setPageSize(5);
}
else
{
con = null;
}
return null ;
}
//Instantiate the StandardSetController
public ApexPages.StandardSetController con{get; set;}
//Boolean to check if there are more records after the present displaying records
public Boolean hasNext
{
get
{
return con.getHasNext();
}
set;
}
//Boolean to check if there are more records before the present displaying records
public Boolean hasPrevious
{
get
{
return con.getHasPrevious();
}
set;
}
//Page number of the current displaying records
public Integer pageNumber
{
get
{
return con.getPageNumber();
}
set;
}
//Returns the previous page of records
public void previous()
{
con.previous();
}
//Returns the next page of records
public void next()
{
con.next();
}
}
Any query about this is welcomed.
Cheers