function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
SATHISH REDDY.SATHISH REDDY. 

View State Error while working on 200+ records which are editable

Hi All,
Hope someone could help me resolve this issue. I have an Accounts List visualforce page with 3 tabs which shows 200+ records each which are editable from this vf page. However am hitting the view state error which am unable to get around with. Below is the VF page & Controller
 public with sharing class AccListMassUpdateStatusTABController_AC {

    public List<cContact> contactsList { get; set; }
    public List<userWrapper> usersList { get; set; }
    public String passSelectedContactId { get; set; }
    public String passSelectedContact { get; set; }
    public String passSelectedContactTitle { get; set; }
    public List<Contact> contacts;
    public List<User> users;
    public Boolean view { get; set; }
    public Boolean edit { get; set; }
    public List<aAccount> lstaAccs { get; set; }
    public Id accId { get; set; }
    public Account agencyAcc;
    public Id selaccId { get; set; }
    public String passSelectedUserId { get; set; }
    public String passSelectedUser { get; set; }
    public emailWrapper emailWrap { get; set; }
    public String varTabId { get; set; }

    public AccListMassUpdateStatusTABController_AC() {
        varTabId = 'Directx';
        view = true;
        edit = false;
        contactsList = new List<cContact >();
        usersList = new List<userWrapper>();
        lstaAccs = new List<aAccount>();
        if(Apexpages.currentPage().getParameters().containsKey('Id')){
            accId = Apexpages.currentPage().getParameters().get('Id');
        }
        else{
            fetchlstaAccs();
        }
    }

    public void toggleSort() {
        // simply toggle the direction
        sortDir = sortDir.equals('asc') ? 'desc' : 'asc';
        // run the query again
        fetchlstaAccs();
    }

    public String sortDir {
        get {
            if(sortDir == null) {
                sortDir = 'desc';
            }
            return sortDir;
        }
        set;
    }

    public String sortField {
        get {
            if(sortField == null) {
                sortField = 'CreatedDate';
            }
            return sortField;
        }
        set;
    }

    /*      public String tabName {
            get  { if (tabName == null) {tabName = 'Primary'; } return tabName;  }
            set;
          }      
    */

    public List<aAccount> fetchlstaAccs() {
        //get{
        String SOQL = '';
       // if (!lstaAccs.isEmpty()) lstaAccs.clear();
        Id ownerid = Userinfo.getUserId();
        system.debug('lstaAccsBeforeQuery  == ' + varTabId + ' lstaAccs == ' + lstaAccs);
        if(varTabId == 'Primary') {
            SOQL = 'SELECT Id,Name,Contacts__c,current_status__c,Background__c,Next_Steps__c, Activity_Type__c, Meeting_Type__c,';
            SOQL += 'lastmodifieddate FROM Account WHERE OwnerId=:ownerid ';

            SOQL += ' order by ' + sortField + ' ' + sortDir + ' LIMIT 500';
        }else if(varTabId == 'Secondary') {

            SOQL = 'SELECT Id,Name,Contacts__c,current_status__c,Background__c,Next_Steps__c, Activity_Type__c, Meeting_Type__c,';
            SOQL += 'lastmodifieddate FROM Account WHERE Secondary_Account_Owner__c != \'\' and Secondary_Account_Owner__c=:ownerid  ';

            SOQL += ' order by ' + sortField + ' ' + sortDir + ' LIMIT 500';
        }else if(varTabId == 'Directx'){
        
            SOQL = 'SELECT Id,Name,Contacts__c,current_status__c,Background__c,Next_Steps__c, Activity_Type__c, Meeting_Type__c,';
            SOQL += 'lastmodifieddate FROM Account WHERE Direct_Beta_Client__c = true';

            SOQL += ' order by ' + sortField + ' ' + sortDir + ' LIMIT 500';
        }
        lstaAccs.clear();
        for(Account a: database.query(SOQL)) {
            lstaAccs.add(new aAccount(a, a.Id, a.Name, a.current_status__c, a.Background__c, a.Next_Steps__c, a.Activity_Type__c, a.Meeting_Type__c, string.ValueOf(a.lastmodifieddate)));
        }
    }
    
    public pageReference setActiveDirectxTab() {
        varTabId = 'Directx';
        if(!lstaAccs.isEmpty()) lstaAccs.clear();
        system.debug('varTabIdActive  == ' + varTabId);
        fetchlstaAccs();
        return null;
    }
    public pageReference setActiveSecondaryTab() {
        varTabId = 'Secondary';
        if(!lstaAccs.isEmpty()) lstaAccs.clear();
        system.debug('varTabIdActive  == ' + varTabId);
        fetchlstaAccs();
        return null;
    }
    
    public pageReference setActiveTab() {
        varTabId = 'Primary';
        if(!lstaAccs.isEmpty()) lstaAccs.clear();
        system.debug('varTabIdActive  == ' + varTabId);
        fetchlstaAccs();
        return null;
    }
       
    public class aAccount {
        public Id AccId { get; set; }
        public Account Acc { get; set; }
        public String AccName { get; set; }
        public String currentstatus { get; set; }
        public String Background { get; set; }
        public String NextSteps { get; set; }
        public String ActivityType { get; set; }
        public String MeetingType { get; set; }
        
        public string LastModified { get; set; }
       
        public aAccount(Account acct, Id aAccountId, string aAccName, string acurrentstatus, string aBackground, string aNextSteps,  string aActivityType, string aMeetingType, string LastModifiedDate) {
            system.debug('acct == ' + acct);
            system.debug('aContacts == ' + aContacts);
            this.AccName = aAccName;
            this.Acc = acct;
            this.AccId = aAccountId;
            this.currentstatus = acurrentstatus;
            this.Background = aBackground;
            this.NextSteps = aNextSteps;
            this.ActivityType = aActivityType;
            this.MeetingType = aMeetingType;
            this.LastModified = LastModifiedDate;
            
        }
    }

    public pagereference save() {
        view = true;
        edit = false;
        List<Account> lstAccsToUpdate = new List<Account>();
        Map<Id, aAccount> mapOrgaAccs = new Map<Id, aAccount>();
        List<aAccount> oldaAccs = new List<aAccount>();
        String SOQL = '';

        if(varTabId == 'Primary') {
            SOQL = 'SELECT Id,Name,Contacts__c,current_status__c,Background__c,Next_Steps__c, Activity_Type__c, Meeting_Type__c,';
            SOQL += 'lastmodifieddate FROM Account WHERE OwnerId = \'' + UserInfo.getUserId() + '\'';

            SOQL += ' order by ' + sortField + ' ' + sortDir + ' LIMIT 500';
        } 
        else if(varTabId == 'Secondary') {

            SOQL = 'SELECT Id,Name,Contacts__c,current_status__c,Background__c,Next_Steps__c, Activity_Type__c, Meeting_Type__c,';
            SOQL += 'lastmodifieddate FROM Account WHERE Secondary_Account_Owner__c != \'\' and Secondary_Account_Owner__c= \'' + UserInfo.getUserId() + '\'';

            SOQL += ' order by ' + sortField + ' ' + sortDir + ' LIMIT 500';
        }
        else if(varTabId == 'Directx') {

            SOQL = 'SELECT Id,Name,Contacts__c,current_status__c,Background__c,Next_Steps__c, Activity_Type__c, Meeting_Type__c,';
            SOQL += 'lastmodifieddate FROM Account WHERE Direct_Beta_Client__c = true';

            SOQL += ' order by ' + sortField + ' ' + sortDir + ' LIMIT 500';
        }
        List<Account> oldAccounts = database.query(SOQL);

        for(Account a: oldAccounts) {
            oldaAccs.add(new aAccount(a, a.Id, a.Name, a.current_status__c, a.Background__c, a.Next_Steps__c, a.Activity_Type__c, a.Meeting_Type__c, string.ValueOf(a.lastmodifieddate)));
        }
        try {
            for(aAccount a : lstaAccs){
                mapOrgaAccs.put(a.acc.Id, new aAccount(a.acc, a.acc.Id, a.acc.Name, a.acc.current_status__c, a.acc.Background__c, a.acc.Next_Steps__c, a.acc.Activity_Type__c, a.acc.Meeting_Type__c, string.ValueOf(a.acc.lastmodifieddate))); 
            }
            for(aAccount a: oldaAccs) {
                if (mapOrgaAccs.containsKey(a.acc.Id) && (mapOrgaAccs.get(a.Acc.Id).currentstatus != a.Acc.Current_Status__c || mapOrgaAccs.get(a.Acc.Id).Background != a.Acc.Background__c || mapOrgaAccs.get(a.Acc.Id).NextSteps != a.Acc.Next_Steps__c ||
                    mapOrgaAccs.get(a.Acc.Id).ActivityType != a.Acc.Activity_Type__c || mapOrgaAccs.get(a.Acc.Id).MeetingType != a.Acc.Meeting_Type__c 
                   )) {                    
                    lstAccsToUpdate.add(mapOrgaAccs.get(a.Acc.Id).acc);
                    }
            }
    
            if(!lstAccsToUpdate.isEmpty()) {
                System.debug('lstAccsToUpdate*** '+lstAccsToUpdate);
                update lstAccsToUpdate;
                fetchlstaAccs();
            }
        } catch (DMlException e) {
            ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR, 'Error: Save Failed Due to :' + e);
            ApexPages.addMessage(myMsg);
            return null;
        }
        return null;
    }

    public pagereference cancel() {
        edit = false;
        view = true;
        return null;
    }

    public pagereference Edit() {
        edit = true;
        view = false;
        return null;
    }

}
SATHISH REDDY.SATHISH REDDY.
Page:
<apex:page sidebar="false" controller="AccListMassUpdateStatusTABController_AC" standardStylesheets="true">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/JavaScript" />

    <style>
        
        .table-container {
            Width:  100.5%;
            height: 500px;
            border: 1px solid black;
            margin: 10px auto;
            background-color: #EBD3C5;
            position: relative; /* or absolute */
            padding-top: 30px; /* matches height of header */

        }
        .table-container-inner {
            overflow-x: hidden;
            overflow-y: auto;
            height: 100%;
            Width:  auto;
        }
        .heading-bg {
            background-color: #66C87D;
            height: 30px; /* matches padding of table-container */
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            border-bottom: 1px solid black;
        }
        table {
            width: auto;
        }
        .heading {
            position: absolute;
            top: 0;
            font-weight: bold;
            text-align: center;
        }
        .datePicker{
            top: 200px !important;
            left: 796px !important;
        }
    .activeTab {
        background-color: lightGreen;    
        background-image:none; 
        font-size: 18px;
        border: none !important;    
        }
    .inactiveTab {
        background-color: lightgrey;    
        background-image:none;
        font-size: 10px;
        color:blue; 
        border: none !important;
    }      
    </style>
    
    <apex:form id="formId">
        <apex:pageBlock Title="Accounts List" mode="inlineEdit" id="acc_list" >
        <apex:pagemessages />
            <apex:pageBlockButtons >
                 <apex:commandButton action="{!Edit}" id="editButton" value="Edit"/>
                 <apex:commandButton action="{!save}" id="saveButton" value="Save"/>
                 <apex:commandButton action="{!cancel}" onclick="resetInlineEdit()" id="cancelButton" value="Cancel"/>
            </apex:pageBlockButtons>
    <apex:tabPanel title="Accounts" id="tabpanelId" tabClass="activeTab" inactiveTabClass="inactiveTab" value="{!varTabId}">
    <!-------- Primary Tab -------->
    <apex:tab label="Primary" name="Primary" switchType="ajax" id="Primary" ontabenter="setActiveTab();">
    <!-- *** Primary Detail Mode*** -->

            <apex:outputpanel rendered="{!AND(view,lstaAccs.size>0)}" id="viewPrimaryDetail">
                <apex:actionStatus id="loadingPrimaryDetail" >
                    <apex:facet name="start" >
                      <center><img src="/img/loading32.gif" />      Loading....  Please Wait...  </center>
                    </apex:facet>
                </apex:actionStatus>
                <div class="table-container">
                <div class="heading-bg"></div>
                    <div class="table-container-inner">
                        <table id="schTablePrimaryDetail" >
                            <thead>
                                <tr>
                                    <td><div class="heading" style="width: 60px;word-wrap:break-word;">
                                         <apex:commandLink value="Account Name" action="{!toggleSort}" style="text-decoration: none;" rerender="formId" status="loading">
                                            <apex:param name="sortField" value="Name" assignTo="{!sortField}"/>
                                        </apex:commandLink></div>
                                    </td>
                                    <td><div class="heading" style="width: 150px;word-wrap:break-word;">Current Status</div></td>
                                    
                                    <td><div class="heading" style="width: 70px;word-wrap:break-word;">
                                        <apex:commandLink value="Last Mod Date" action="{!toggleSort}" style="text-decoration: none;" rerender="formId" status="loading">
                                            <apex:param name="sortField" value="Lastmodifieddate" assignTo="{!sortField}"/>
                                        </apex:commandLink></div>
                                    </td>
                                    
                                </tr>
                            </thead>
                            <tbody>

                                <apex:repeat value="{!lstaAccs}" var="a">

                                <tr onmouseover="this.style.backgroundColor='#e3f3ff';" onmouseout="this.style.backgroundColor='#ffffff';">
                                <td><div style="width: 80px;word-wrap:break-word;">
                                <apex:outputLink value="/{!a.Acc.Id}" id="acclinkPrimaryDetail" title="Account Name">{!a.Acc.name}</apex:outputLink></div></td>
                                <td><div style="width: 200px;word-wrap:break-word;">
                                    <apex:outputField value="{!a.Acc.Current_Status__c}" title="Current Status">
                                                <apex:inlineEditSupport showOnEdit="saveButton, cancelButton"
                                                    hideOnEdit="editButton" event="ondblclick"
                                                    changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
        
                                  </apex:outputField></div>
                                </td>
                                
                                <td><div style="width: 62px;word-wrap:break-word;padding-left:1em;">
                                    <apex:outputField value="{!a.Acc.LastModifiedDate}"  title="Last Modified Date"/></div>
                                </td>
                                </tr>
                                </apex:repeat>
                            </tbody>
                        </table>
                    </div>
                </div>
            </apex:outputpanel>

    <!-- *** Primary Edit Mode*** -->
            <apex:outputpanel rendered="{!edit}" id="editPrimaryEdit">
                <div class="table-container">
                <div class="heading-bg"></div>
                    <div class="table-container-inner">
                        <table id="schTable1PrimaryEdit">
                            <thead>
                                <tr>
                                    <td><div class="heading" style="width: 50px;word-wrap:break-word;">Account Name</div></td>
                                    <td><div class="heading" style="width: 150px;word-wrap:break-word;">Current Status</div></td>
                                    <td><div class="heading" style="width: 70px;word-wrap:break-word;">Last Mod Date</div></td>
                                </tr>
                            </thead>
                            <tbody>
                                <apex:repeat value="{!lstaAccs}" var="a">

                                <tr onmouseover="this.style.backgroundColor='#e3f3ff';" onmouseout="this.style.backgroundColor='#ffffff';">
                                    <td><div style="width: 60px;word-wrap:break-word;"><apex:outputField value="{!a.Acc.name}" title="Account Name"/></div></td>
                                    <td><div style="width: 200px;word-wrap:break-word;"><apex:inputField value="{!a.Acc.Current_Status__c}"/></div></td>
                                    <td><apex:outputField value="{!a.Acc.LastModifiedDate}" title="Last Modified Date"/></td>
                                </tr>
                                </apex:repeat>
                            </tbody>
                        </table>
                    </div>
                </div>
              </apex:outputpanel>
            </apex:tab>
    
<!-------- Secondary Tab -------->
        <apex:tab label="Secondary" name="Secondary" switchType="ajax" id="Secondary" ontabenter="setActiveSecondaryTab();">
    <!-- *** Secondary Detail Mode*** -->
            <apex:pageMessage summary="No Secondary Accounts were assigned to you." severity="Info" strength="3" rendered="{!lstaAccs.size=0}"/>
            <apex:outputpanel rendered="{!AND(view,lstaAccs.size>0)}" id="viewSecondaryDetail">
                <apex:actionStatus id="loadingSecondaryDetail" >
                    <apex:facet name="start" >
                      <center><img src="/img/loading32.gif" />      Loading....  Please Wait...  </center>
                    </apex:facet>
                </apex:actionStatus>
                <div class="table-container">
                <div class="heading-bg"></div>
                    <div class="table-container-inner">
                        <table id="schTableSecondaryDetail">
                            <thead>
                                <tr>
                                    <td><div class="heading" style="width: 60px;word-wrap:break-word;">
                                         <apex:commandLink value="Account Name" action="{!toggleSort}" style="text-decoration: none;" rerender="formId" status="loading">
                                            <apex:param name="sortField" value="Name" assignTo="{!sortField}"/>
                                        </apex:commandLink></div>
                                    </td>
                                    <td><div class="heading" style="width: 150px;word-wrap:break-word;">Current Status</div></td>
                                    <td><div class="heading" style="width: 70px;word-wrap:break-word;">
                                        <apex:commandLink value="Last Mod Date" action="{!toggleSort}" style="text-decoration: none;" rerender="formId" status="loading">
                                            <apex:param name="sortField" value="Lastmodifieddate" assignTo="{!sortField}"/>
                                        </apex:commandLink></div>
                                    </td>

                                </tr>
                            </thead>
                            <tbody>

                                <apex:repeat value="{!lstaAccs}" var="a">

                                <tr onmouseover="this.style.backgroundColor='#e3f3ff';" onmouseout="this.style.backgroundColor='#ffffff';">
                                <td><div style="width: 80px;word-wrap:break-word;">
                                <apex:outputLink value="/{!a.Acc.Id}" id="acclinkSecondaryDetail" title="Account Name">{!a.Acc.name}</apex:outputLink></div></td>
                                <td><div style="width: 200px;word-wrap:break-word;">
                                    <apex:outputField value="{!a.Acc.Current_Status__c}" title="Current Status">
                                                <apex:inlineEditSupport showOnEdit="saveButton, cancelButton"
                                                    hideOnEdit="editButton" event="ondblclick"
                                                    changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
                                  </apex:outputField></div>
                                </td>
                                <td><div style="width: 62px;word-wrap:break-word;padding-left:1em;">
                                    <apex:outputField value="{!a.Acc.LastModifiedDate}"  title="Last Modified Date"/></div>
                                </td>
                               
                                </tr>
                                </apex:repeat>
                            </tbody>
                        </table>
                    </div>
                </div>
            </apex:outputpanel>

    <!-- *** Secondary Edit Mode*** -->
            <apex:outputpanel rendered="{!edit}" id="editSecondaryEdit">
                <div class="table-container">
                <div class="heading-bg"></div>
                    <div class="table-container-inner">
                        <table id="schTable1SecondaryEdit">
                            <thead>
                                <tr>
                                    <td><div class="heading" style="width: 50px;word-wrap:break-word;">Account Name</div></td>
                                    <td><div class="heading" style="width: 150px;word-wrap:break-word;">Current Status</div></td>
                                    <td><div class="heading" style="width: 70px;word-wrap:break-word;">Last Mod Date</div></td>
                                </tr>
                            </thead>
                            <tbody>
                                <apex:repeat value="{!lstaAccs}" var="a">

                                <tr onmouseover="this.style.backgroundColor='#e3f3ff';" onmouseout="this.style.backgroundColor='#ffffff';">
                                    <td><div style="width: 60px;word-wrap:break-word;"><apex:outputField value="{!a.Acc.name}" title="Account Name"/></div></td>
                                    <td><div style="width: 200px;word-wrap:break-word;"><apex:inputField value="{!a.Acc.Current_Status__c}"/></div></td>
                                    <td><apex:outputField value="{!a.Acc.LastModifiedDate}" title="Last Modified Date"/></td>
                                </tr>
                                </apex:repeat>
                            </tbody>
                        </table>
                    </div>
                </div>
              </apex:outputpanel>
            </apex:tab>            

    <!-- *** Direct Detail Mode*** -->             
            <apex:tab label="Direct" name="Direct" switchType="ajax" id="Direct" ontabenter="setActiveDirectTab();">
            <apex:pageMessage summary="No Direct Accounts exist." escape="false" severity="Info" strength="3" rendered="{!lstaAccs.size=0}" />
            <apex:outputpanel rendered="{!AND(view,lstaAccs.size>0)}" id="viewDirectDetail">
                <apex:actionStatus id="loadingDirectDetail" >
                    <apex:facet name="start" >
                      <center><img src="/img/loading32.gif" />      Loading....  Please Wait...  </center>
                    </apex:facet>
                </apex:actionStatus>
                <div class="table-container">
                <div class="heading-bg"></div>
                    <div class="table-container-inner">
                        <table id="schTableDirectDetail" >
                            <thead>
                                <tr>
                                    <td><div class="heading" style="width: 60px;word-wrap:break-word;">
                                         <apex:commandLink value="Account Name" action="{!toggleSort}" style="text-decoration: none;" rerender="formId" status="loading">
                                            <apex:param name="sortField" value="Name" assignTo="{!sortField}"/>
                                        </apex:commandLink></div>
                                    </td>
                                    <td><div class="heading" style="width: 150px;word-wrap:break-word;">Current Status</div></td>
                                    <td><div class="heading" style="width: 70px;word-wrap:break-word;">
                                        <apex:commandLink value="Last Mod Date" action="{!toggleSort}" style="text-decoration: none;" rerender="formId" status="loading">
                                            <apex:param name="sortField" value="Lastmodifieddate" assignTo="{!sortField}"/>
                                        </apex:commandLink></div>
                                    </td>
                                    
                                </tr>
                            </thead>
                            <tbody>

                                <apex:repeat value="{!lstaAccs}" var="a">

                                <tr onmouseover="this.style.backgroundColor='#e3f3ff';" onmouseout="this.style.backgroundColor='#ffffff';">
                                <td><div style="width: 80px;word-wrap:break-word;">
                                <apex:outputLink value="/{!a.Acc.Id}" id="acclinkPrimaryDetail" title="Account Name">{!a.Acc.name}</apex:outputLink></div></td>
                                <td><div style="width: 200px;word-wrap:break-word;">
                                    <apex:outputField value="{!a.Acc.Current_Status__c}" title="Current Status">
                                                <apex:inlineEditSupport showOnEdit="saveButton, cancelButton"
                                                    hideOnEdit="editButton" event="ondblclick"
                                                    changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
        <!--CHECK THIS LINE-->          <!--<apex:actionSupport event="onclick" reRender="hdnFocusedElement"/>-->
                                  </apex:outputField></div>
                                </td>
                                <td><div style="width: 62px;word-wrap:break-word;padding-left:1em;">
                                    <apex:outputField value="{!a.Acc.LastModifiedDate}"  title="Last Modified Date"/></div>
                                </td>
                                
                                </tr>
                                </apex:repeat>
                            </tbody>
                        </table>
                    </div>
                </div>
            </apex:outputpanel>

    <!-- *** Direct Edit Mode*** -->
            <apex:outputpanel rendered="{!edit}" id="editDirectEdit">
                <div class="table-container">
                <div class="heading-bg"></div>
                    <div class="table-container-inner">
                        <table id="schTable1DirectEdit">
                            <thead>
                                <tr>
                                    <td><div class="heading" style="width: 50px;word-wrap:break-word;">Account Name</div></td>
                                    <td><div class="heading" style="width: 150px;word-wrap:break-word;">Current Status</div></td>
                                    <td><div class="heading" style="width: 70px;word-wrap:break-word;">Last Mod Date</div></td>
                                </tr>
                            </thead>
                            <tbody>
                                <apex:repeat value="{!lstaAccs}" var="a">

                                <tr onmouseover="this.style.backgroundColor='#e3f3ff';" onmouseout="this.style.backgroundColor='#ffffff';">
                                    <td><div style="width: 60px;word-wrap:break-word;"><apex:outputField value="{!a.Acc.name}" title="Account Name"/></div></td>
                                    <td><div style="width: 200px;word-wrap:break-word;"><apex:inputField value="{!a.Acc.Current_Status__c}"/></div></td>
                                    <td><apex:outputField value="{!a.Acc.LastModifiedDate}" title="Last Modified Date"/></td>
                                </tr>
                                </apex:repeat>
                            </tbody>
                        </table>
                    </div>
                </div>
              </apex:outputpanel>
            </apex:tab>
          </apex:tabPanel>
        
        <apex:actionFunction action="{!setActiveTab}" name="setActiveTab"/>
        <apex:actionFunction action="{!setActiveSecondaryTab}" name="setActiveSecondaryTab"/>
        <apex:actionFunction action="{!setActiveDirectTab}" name="setActiveDirectTab"/>
        
        </apex:pageBlock>
    </apex:form>
    <script>
        var $j = jQuery.noConflict();
         $j(document).ready(function(){
          $j("#toggleId").click(function(){
            $j("#detailTblId").toggle();
            if($j("#detailTblId").css('display')=='none'){
                $j('#linkTextId').html('Click here to show the Contact information in the Tabular form.');
            }else{
                $j('#linkTextId').html('Click here to Hide.');
            }
          });
       });
        var newWin=null;
    
    </script>
</apex:page>
**********************************

This is the page
SATHISH REDDY.SATHISH REDDY.
I cannot use transient key as all those fields are editable by user from this page. Also, i saw that pagination is one way to achieve this but not sure how to implement that in my code. It would be great if some one can guide me in the right direction . Thanks in Advance!