Apex

Client Side Pagination in VisualForce - Salesforce

Client Side Pagination in VisualForce - Salesforce

Client Side Pagination in VisualForce - Salesforce
Client Side Pagination in VisualForce - Salesforce

Most of us face the requirement of creating pagination when displaying data in the visualForce page. We all know the trivial way of doing it ,This post will help you achieve pagination using Client Side Scripts which are faster and effective than the usual way.

To achieve it first we need to add two files in the static resources.
1) Jquery.js     Click To Download
2) Paginate.js  Click To Download

Create a Visualforce page, copy and Paste the below code :
Replace the Code highlighted in yellow below with your Static Resource Name.

<apex:page Standardcontroller="Account" standardStyleSheets="false" showHeader="false" cache="false" tabStyle="Account" recordSetVar="accounts">
    <style>
        table{
            width: 100%;
            background-color: #f8f8f8;
            border:1px solid #EAEAEA;
            padding: 5px;
        }
        
        tr{
            text-align: left;
            padding: 4px 2px;
        }
        
        .first h3{
            background-color: #0CA1CF;
            padding: 5px 3px;
        }
        
        .page_navigation{
            font-family: tahoma;
            font-size: 11px;
            float: right;
            
        }
        
        .page_navigation a{
            text-decoration: none;
            padding: 3px 5px;
            margin: 0 2px;
            background-color: #28ADD9;
            color: white;
            display: block;
            float: left;
            text-align: center;
        }
        
        .page_navigation .active_page{
            background-color: white;
            color: black;
        }
        
        .demo2{
            margin: 10px 5px;
            background-color: #00064F;
            overflow:auto;
            text-align: center
        }
        
        .title{
            font-family: Georgia;
            font-size: 36px;
            font-style: italic;
            color: white;
            padding: 10px;
        }
        
        .head{
            font-family: Tahoma;
            font-size:20px;
            color: orange;
            padding: 5px;
            overflow: auto;
        }
        
        .body {
            background-color: #C6D9D2;
            
        }
        
        .content {
            width: 90%;
            margin: 0px auto;
            overflow: auto;
        }
        
        .item{
            color: black;
            font-family: Georgia;
            font-size: 16px;
            padding: 10px;
            display: block;
            
        }
        
        .block{
            display:block;
        }
        
        .panel {
            width: 40%;
            float: left;
            padding: 0 30px;
            
        }
        
        .demo2 .page_navigation a{
            background-color: orange;
            color: black;
        }
        
        .demo2 .page_navigation .active_page{
            background-color: transparent;
            color: white;
        }
    </style>
  
    <apex:includeScript value="{!$Resource.jquery}"/>     
    <apex:includeScript value="{!$Resource.Paginate}"/>
    
    <script type="text/javascript">
        $.noConflict();
        
        jQuery(document).ready(function($){
            $(esc(pbsId)).pajinate({
                item_container_id : esc(accountTableBodyId),
                items_per_page : 10
            });
            
            $('.demo2').pajinate();
        }); 
        
        function esc(myid) {
           return '#' + myid.replace(/(:|\.)/g,'\\\\$1');
        }
    
     </script>
    
          <apex:define name="content">    
    
            <apex:pageBlock >
                <apex:pageBlockSection title="Pagination Example" columns="1" id="pbs">
                    <div class="page_navigation"></div>
                    <script> 
                    
                        var accountTableId = '{!$Component.accountTable}'; 
                        var accountTableBodyId = accountTableId + ':tb';
                        
                        var pbsId = '{!$Component.pbs}';
                    
                    </script>
                    
                    <apex:dataTable value="{!accounts}" var="account" id="accountTable" rows="1000">
                        <apex:column >
                            <apex:facet name="header">Name</apex:facet>
                            <apex:outputField value="{!account.name}"/>
                        </apex:column>
                        <apex:column >
                            <apex:facet name="header">Rating</apex:facet>
                            <apex:outputField value="{!account.rating}"/>
                        </apex:column>
                        <apex:column >
                            <apex:facet name="header">Annual Revenue</apex:facet>
                            <apex:outputField value="{!account.annualRevenue}"/>
                        </apex:column>                
                    </apex:dataTable> 
                    
                      
                    <div class="page_navigation"></div>
                </apex:pageBlockSection>
            </apex:pageBlock>
        </apex:define>   
</apex:page>

About Saurabh Dua

0 comments:

Post a Comment

Powered by Blogger.